This document discusses the benefits of using Flexbox for web layout. It begins with an overview of Flexbox terminology including flex containers, items, main/cross axes. It then covers Flexbox properties like flex-direction, justify-content, align-items and order. Common use cases like centering, multi-item layouts and reordering content are demonstrated. Browser support and syntax variations are noted. While Flexbox is well-suited for components, it has limitations for full page layouts. Designers should learn when different tools like Flexbox are best applied.
10. Designers aren’t stupid.
Many designers are willing to explore web tech as a
design tool, but we have to make the right things easier.
Flexbox is a step in the right direction.
49. Alignment
along the main axis: justify-content
(align-content for multiple lines along cross axis)
#bob { justify-content: flex-start |
flex-end | center | space-between |
space-around }
JUSTIFY-CONTENT
in the case of flex-direction: row
52. Alignment
along the cross axis: align-items
(align-self can be applied to the flex items themselves/individually)
#bob { align-items: flex-start |
flex-end | center | baseline | stretch }
ALIGN-ITEMS
in the case of flex-direction: row
54. Order
changes the visual order vs. the source order
.foo { order: [n]; }
.item:nth-child(3) { order: -1; }
3
1
2
55. Common use cases
True centering (both axes)
Multi-box layouts (products, teasers)
Unknown menu items
Display order
Wrapping (menu items, boxes)
Tab groups
Form layout