Menu
When I use the css property align-items, I cannot see any visual difference with the value of flex-end or value of end.
What is the difference between align-items: end and align-items: flex-end?
381
One value ( end ) is defined in the CSS Box Alignment specification, and is intended to apply to multiple box layout models (block, table, grid, flex, etc.) The other value ( flex-end ) is defined in the CSS flexbox specification, and is intended to apply only to flex layout.
flex-end : items are packed toward to end line. center : items are centered along the line. space-between : items are evenly distributed in the line; first item is on the start line, last item on the end line.
flex-start takes into account the presence of the -reverse values of the flex direction, while start does not.
flex-end : lines packed to the end of the container. center : lines packed to the center of the container. space-between : lines evenly distributed; the first line is at the start of the container while the last one is at the end. space-around : lines evenly distributed with equal space between them.
One value (end) is defined in the CSS Box Alignment specification, and is intended to apply to multiple box layout models (block, table, grid, flex, etc.)
The other value (flex-end) is defined in the CSS flexbox specification, and is intended to apply only to flex layout.
With the Box Alignment spec, the W3C is attempting to establish a universal language for the alignment of boxes in CSS. Eventually, the Box Alignment values will supersede the particular values defined in flex, grid and other specs.
For example:
end will be used instead of flex-end column-gap will be used instead of grid-column-gap Many Box Alignment values are already in use across major browsers. But full implementation is still a ways off, so it's still safer to use flex-end instead of end (and then count on long-term support for legacy names).
Here's an illustration from the Box Alignment spec:
§ 8.3. Legacy Gap Properties: the
grid-row-gap,grid-column-gap, andgrid-gappropertiesThe Grid Layout module was originally written with its own set of gutter properties, before all such properties were unified into the existing
row-gap/column-gapnaming. For compatibility with legacy content, those legacy property names must be supported as aliases:
grid-row-gapmust be treated as a shorthand for therow-gapproperty
grid-column-gapmust be treated as a shorthand for thecolumn-gapproperty
grid-gapmust be treated as a shorthand for thegappropertyIn all three cases, the legacy properties must take the same grammar as the property they are aliasing, and just "forward" the value to their aliased property.
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
