Is there a way to use different variations of the same style property?

I don't think that's possible using the API, also does text-align work for non-text components? You'll probably want to use the align-content property from flexbox

You should try to use Component's stylable-require property to show the particular style property (marked with toRequire) and unstylable for the one you don't need.

editor.Components.addType('...', {
 model: {
  defaults: {
   'stylable-require': ['align-content'],
   unstylable: ['text-align'],
  }
 }
});

// in your StyleManager configuration
buildProps: [..., 'text-align', 'align-content'],
properties: [{
       // ...
        property: 'align-content',
        toRequire: true, // <-- So this property will be hidden if the component doesn't require it
}]

@artf Thank you for your response.

In this case, I would still have an issue using the align-content property with flex columns and rows. For columns, I'd like the options to read: Top, Center, and Bottom and for rows I'd like the options to read: Left, Center, and Right.

My users aren't too familiar with CSS let alone flexbox and to use Start, Center and End won't be as good of a user experience as I'd like.

Do you have any other suggestions?

Thank you, Josh