Flexible Box Layout

Chapter 11


  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