Display Flex

Now user can move an element be laid out in any flow direction, can display order reversed or rearranged at the style, and can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size

Default (None use display flex)

Step Drag and drop container Drag and drop items in the container Click at container Click tab style

Direction row default: Left to right in ltr, right to left in rtl

Step Drag and drop container Drag and drop items in the container Click at container Click tab style Drag display flex on the layout (Direction row and wrap don't wrap are now set by default)

Direction Row-reverse : Right to left in ltr, left to right in rtl

Step Drag and drop container Drag and drop items in the container Click at container Click tab style Drag display flex on the layout (Direction row and wrap don't wrap are now set by default) Click Direction row-reverse

Direction Column : same as row but top to bottom

Step Drag and drop container Drag and drop items in the container Click at container Click tab style Drag display flex on the layout (Direction row and wrap don't wrap are now set by default) Click Direction column

Direction Column-reverse : same as row but bottom to top

Step Drag and drop container Drag and drop items in the container Click at container Click tab style Drag display flex on the layout (Direction row and wrap don't wrap are now set by default) Click Direction column-reverse

Align flex-start : items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.

Step Drag and Drop Container Drag and Drop Items in the container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Align flex-start

Align Center : items are centered on the cross-axis

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Align center

Align Flex-end : items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Align flex-end

Align Stretch : stretch to fill the container (still respect min-width/max-width)

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Align stretch

Justify Flex-start : items are packed toward the start of the flex-direction.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Justify flex-start

Justify center : items are centered along the line

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Justify center

Justify flex-end : items are packed toward the end of the flex-direction.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Justify flex-end

Justify space-between : items are evenly distributed in the line; first item is on the start line, last item on the end line

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Justify space-between

Justify space-around : items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Justify space-around

Wrap don’t wrap (default) : all flex items will be on one line

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.)

Wrap flex-start : items are placed at the start of the cross axis. The difference between these is subtle , and is about respecting the flex-direction rules or the writing-mode rules.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap flex-start

Wrap center : items are centered in the cross-axis

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap center

Wrap flex-end : items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap flex-end

Wrap stretch : stretch to fill the container (still respect min-width/max-width)

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap baseline

Wrap space-between : items evenly distributed; the first line is at the start of the container while the last one is at the end

Step Drag and Drop Container Drag and Drop Items in the container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap space-between

Wrap space-around : items evenly distributed with equal space around each line

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap space-around