<EuiFlexGroup> alignItems='baseline' support

[bevacqua]

For text and images combinations, baseline makes more sense than flex-end, but it's not supported by this component yet.

[cchaos]

There are actually a lot of values for the typical align-items css property that aren't available in EuiFlexGroup.

CSS values:

/* Basic keywords */ 
align-items: normal; 
align-items: stretch; 

/* Positional alignment */ 
align-items: center; /* Pack items around the center */ 
align-items: start; /* Pack items from the start */ 
align-items: end; /* Pack items from the end */ 
align-items: flex-start; /* Pack flex items from the start */ 
align-items: flex-end; /* Pack flex items from the end */ 
align-items: self-start; 
align-items: self-end; 
align-items: left; /* Pack items from the left */ 
align-items: right; /* Pack items from the right */ 

/* Baseline alignment */
align-items: baseline; 
align-items: first baseline; 
align-items: last baseline; /* Overflow alignment (for positional alignment only) */ 
align-items: safe center; 
align-items: unsafe center; 

/* Global values */ 
align-items: inherit; 
align-items: initial; 
align-items: unset;

Supported:

  stretch: null,
  flexStart: 'euiFlexGroup--alignItemsFlexStart',
  flexEnd: 'euiFlexGroup--alignItemsFlexEnd',
  center: 'euiFlexGroup--alignItemsCenter',

[bevacqua]

Correct, that's the only one I needed that doesn't seem to be covered today

…

On Feb 16, 2018 20:43, "Caroline Horn" ***@***.***> wrote: There are actually a lot of values for the typical align-items css property that aren't available in EuiFlexGroup. CSS values: /* Basic keywords */ align-items: normal; align-items: stretch; /* Positional alignment */ align-items: center; /* Pack items around the center */ align-items: start; /* Pack items from the start */ align-items: end; /* Pack items from the end */ align-items: flex-start; /* Pack flex items from the start */ align-items: flex-end; /* Pack flex items from the end */ align-items: self-start; align-items: self-end; align-items: left; /* Pack items from the left */ align-items: right; /* Pack items from the right */ /* Baseline alignment */align-items: baseline; align-items: first baseline; align-items: last baseline; /* Overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* Global values */ align-items: inherit; align-items: initial; align-items: unset; Supported: flexStart: null, flexEnd: 'euiFlexGroup--justifyContentFlexEnd', center: 'euiFlexGroup--justifyContentCenter', spaceBetween: 'euiFlexGroup--justifyContentSpaceBetween', spaceAround: 'euiFlexGroup--justifyContentSpaceAround', spaceEvenly: 'euiFlexGroup--justifyContentSpaceEvenly', — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#423 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA5BlZBvhzV1BNaNE51S1IpNlLNPBulyks5tVhKOgaJpZM4SJDEn> .

[cchaos]

Based on reading through some docs, the only safe-to-implement ones (that we don't have) are:

align-items: normal; 
align-items: baseline; 

I can add these.