Flexible Box Layout

Chapter 12

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. Gallery with columns neatly lined up using Flexbox
  5. Widget with several components, all vertically centered
  6. The four values of the flex-direction property
  7. Changing the flex direction can completely change the layout
  8. Home page layout using flex-direction: row and column
  9. The four values of the flex-direction property when writing direction is right to left
  10. The four values of flex-direction property when writing mode is horizontal-tb
  11. The three values of the flex-wrap property in a row-oriented flow
  12. A row-oriented unwrapped flex flow
  13. Axis dimensions and directions
  14. Stacking of row-oriented flex lines
  15. Stacking of column-oriented flex lines
  16. The three values of flex-wrap property in a column-oriented flow
  17. Empty space will be in the direction of main-end and cross-end
  18. The six values of the justify-content property
  19. Overflow of a single-line flex container is affected by justify-content
  20. Flex-start alignment
  21. Flex-end alignment
  22. Center alignment
  23. Space-between alignment
  24. Space-around alignment
  25. Space-evenly alignment
  26. Comparing center, space-around, space-between, and space-evenly
  27. Internationally-robust navigation alignment
  28. Changing the layout with one property value pair
  29. The five values of the align-items property for both rows and columns
  30. Stretch alignment
  31. Effect of cross-axis margins on item alignment
  32. Flex-start, flex-end, and center alignment
  33. Baseline alignment
  34. Changing flex item alignments
  35. Distribution of extra space for each value of align-content
  36. Flex-line overflow directions for each value of align-content
  37. Distribution of free space for space-between, space-around, and space-evenly
  38. Flex items within a container
  39. Five flex items in an aside
  40. Flex container overflow with minimum-width flex items
  41. Zero-minimum-width flex items in non-wrapped and wrapped flex containers
  42. A variety of flex-growth scenarios
  43. Mixed widths and growth factors
  44. Flex sizing when using the flex shorthand
  45. Flex sizing differences between using flex and flex-grow
  46. A variety of flex shrinking scenarios
  47. Shrinking being impeded by flex item content
  48. Flex items shrink proportionally relative to their shrink factor
  49. Flex items shrink proportionally relative to their shrink factor and content
  50. A wide flexbox layout (make the browser window wide)
  51. A narrow flexbox layout (make the browser window narrow)
  52. Sizing flex items on a content basis
  53. Auto flex basis and flex item widths
  54. Default sizing of flex items
  55. Sizing flex items with length-unit flex bases
  56. Sizing flex items with percentage flex bases
  57. 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
  58. Flex growth in auto and zero flex bases
  59. Flex items shrink but won't grow when flex: initial is set
  60. Flex items can grow and shrink when flex: auto is set
  61. With flex: none, flex items will neither grow nor shrink
  62. Flexing using a single numeric value
  63. Reordering flex items with the order property
  64. Flex items appear in order of ordinal groups, by source order within their group
  65. Changing the order will change the visual order, but not the tab order