Difference between flex-end and end? [duplicate]

by

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
  • and so on.

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, and grid-gap properties

The 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-gap naming. For compatibility with legacy content, those legacy property
names must be supported as aliases:

  • grid-row-gap must be treated as a shorthand for the row-gap property

  • grid-column-gap must be treated as a shorthand for the column-gap
    property

  • grid-gap must be treated as a shorthand for the gap property

In 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.

More Related Contents:

  1. What’s the difference between align-content and align-items?
  2. How can I align one item right with flexbox?
  3. Fill remaining vertical space with CSS using display:flex
  4. How does flex-wrap work with align-self, align-items and align-content?
  5. Flex-box: Align last row to grid
  6. Text in a flex container doesn’t wrap in IE11
  7. Equal height rows in CSS Grid Layout
  8. Align 3 unequal blocks left, center and right
  9. My position: sticky element isn’t sticky when using flexbox
  10. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  11. Every item to have the same width as the widest element [duplicate]
  12. How can I make a div span multiple rows and columns in a grid?
  13. Flexible box model – display : flex, box, flexbox? [duplicate]
  14. firefox overflow-y not working with nested flexbox
  15. Are flex items block level element?
  16. Bootstrap change order of columns
  17. CSS – How to have children in different parents the same height?
  18. How to specify an element after which to wrap in css flexbox? [duplicate]
  19. CSS3 Flexbox: display: box vs. flexbox vs. flex
  20. Flex auto margin not working in IE10/11
  21. Align vertically using CSS 3
  22. Can flex items wrap in a container with dynamic height?
  23. How to fix unexpected column order in bootstrap 4?
  24. How to stretch children to fill cross-axis?
  25. Align button at the bottom of div using CSS
  26. Issue when centering vertically with flexbox when heights are unknown
  27. Do I not understand the flex-grow property?
  28. Row Wrap in flex-box not wrapping in Safari
  29. CSS: Center block, but align contents to the left
  30. What exactly flex-basis property sets?

Leave a Comment