Auto Margins With auto margins, flex items can be centered, spaced away or packed into sub-groups. Unlike justify-content, which is applied to the flex container, auto margins go on flex items. They work by consuming all free space in the specified direction. Align group of flex items to the right, but first item to the left Scenario from the question: making a group of flex items align-right (justify-content: flex-end) but have the first item align left (justify-self: flex-start) Consider a header section with a group of nav items and a logo. With justify-self the logo could be aligned left while the nav items stay far right, and the whole thing adjusts smoothly ("flexes") to different screen sizes.

shrink

grow

flex container

If you don't need to support IE9 or lower, you can use flexbox freely, and don't need to use floated layouts.

Honestly, even without flexbox support, most of the layout problems would be solved with simple-basic CSS3 support that is standard in all clients.

As a conclusion, I’d say that Flexbox in an email unfortunately causes more troubles than it helps solving.

Now that we’ve gotten newer layout features — again, like grid and flexbox — floats, too, have sort of fallen by the wayside, perhaps either because there are better ways to accomplish what they do

Just like in flexbox, this will move the displayed grid items out of source order, placing them after the grid items that don’t have explicit order values.

This nav bar by Chris Coyier is a great example of something that makes more sense as a flexbox than grid.

Flexbox and grid play well together, and are a huge step forward from the float & table hacks they replace.

Flexbox's strength is in its content-driven model. It doesn't need to know the content up-front. You can distribute items based on their content, allow boxes to wrap which is really handy for responsive design, you can even control the distribution of negative space separately to positive space.

Flexbox: content dictates layout

Grid: container dictates layout

Flexbox is for one dimensional layout (row or column). CSS grid is for two dimensional layout.

the difference is exactly like block and inline-block ... if you use inline-grid with sibling elements they will be placed in the same line unlike grid ... so here you change to grid also since each element is inside a grid area alone

Situation: you have a single line of text in a flex child element. You don’t want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping make layout easier!

iron-list must either be explicitly sized, or delegate scrolling to an explicitly sized parent. By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style, or else is sized by other layout means (e.g. the flex or fit classes).