Flexible Box Layout

Figures

1. The two kinds of flex containers
2. A simple tabbed navigation
3. Power grid layout with Flexbox, with buttons aligned on the bottom
4. Widget with several components, all vertically centered
5. The four values of the flex-direction property
6. Changing the flex direction can completely change the layout
7. Home page layout using flex-direction: row and column
8. The four values of the flex-direction property when writing direction is right to left
9. The four values of flex-direction property when writing mode is horizontal-tb
10. The three values of the flex-wrap property in a row-oriented flow
11. A row-oriented unwrapped flex flow
12. Stacking of row-oriented flex lines
13. Stacking of column-oriented flex lines
14. Empty space will be in the direction of main-end and cross-end
15. The values of the justify-content property
16. The effects of start content justification
17. The effects of end content justification
18. The effects of center content justification
19. The effects of space-between content justification
20. The effects of space-around content justification
21. The effects of space-evenly content justification
22. Internationally-robust navigation alignment
23. Changing the layout with one property value pair
24. The values of the align-items property for both rows and columns
25. Effect of margins on cross-axis alignment
26. Baseline alignments
27. Safe versus unsafe alignments
28. Changing individual flex item alignments
29. Distribution of extra space for each value of align-content
30. Flex-line overflow directions for each value of align-content
31. Gaps between rows of flex items
32. Gaps between adjacent flex items along the inline axis
33. Gaps and margins combine to open more space
34. Percentage-based row gaps with and without explicit container heights
35. Row and column gaps set using the gap shorthand property
36. Flex items within a container
37. Five flex items in an aside
38. Flex container overflow with minimum-width flex items
39. Zero-minimum-width flex items in non-wrapped and wrapped flex containers
40. A variety of flex-growth scenarios
41. Mixed widths and growth factors
42. Flex sizing when using the flex shorthand
43. Flex sizing differences between using flex and flex-grow
44. A variety of flex shrinking scenarios
45. Shrinking being impeded by flex item content
46. Flex items shrink proportionally relative to their shrink factor
47. Flex items shrink proportionally relative to their shrink factor and content
48. A wide flexbox layout (make the browser window wide)
49. A narrow flexbox layout (make the browser window narrow)
50. Fit-content flex basis sizing
51. Sizing flex items on a content basis, with and without growing
52. Sizing flex items on a max-content basis, with and without growing
53. Sizing flex items on a min-content basis, with and without growing
54. Auto flex basis and flex item widths
55. Default sizing of flex items
56. Sizing flex items with length-unit flex bases
57. Sizing flex items with percentage flex bases
58. While the percentage value for flex-basis is relative to the width of the flex container, the main-axis size is impacted by its siblings
59. Flex growth in auto and zero flex bases
60. Flex items shrink but won't grow when flex: initial is set
61. Flex items can grow and shrink when flex: auto is set
62. With flex: none, flex items will neither grow nor shrink
63. Flexing using a single numeric value
64. Reordering flex items with the order property
65. Flex items appear in order of ordinal groups, by source order within their group
66. Changing the order will change the visual order, but not the tab order