Flexible Box Layout

Chapter 12

This index contains editing notes for the QC phase of production. If the book has been published and you still see this note, please pull a fresh copy of the repository from GitHub.


  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 five 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. Comparing center, space-around, and space-between
  26. Internationally-robust navigation alignment
  27. Changing the layout with one property value pair
  28. The five values of the align-items property for both rows and columns
  29. Stretch alignment
  30. Effect of cross-axis margins on item alignment
  31. Flex-start, flex-end, and center alignment
  32. Baseline alignment
  33. Changing flex item alignments
  34. Distribution of extra space for each value of align-content
  35. Flex-line overflow directions for each value of align-content
  36. Distribution of free space for space-between and space-around
  37. Flex items within a container
  38. Five flex items in an aside
  39. Flex container overflow with minimum-width flex items
  40. Zero-minimum-width flex items in non-wrapped and wrapped flex containers
  41. A variety of flex-growth scenarios
  42. Mixed widths and growth factors
  43. Flex sizing when using the flex shorthand
  44. Flex sizing differences between using flex and flex-grow
  45. A variety of flex shrinking scenarios
  46. Shrinking being impeded by flex item content
  47. Flex items shrink proportionally relative to their shrink factor
  48. Flex items shrink proportionally relative to their shrink factor and content
  49. A wide flexbox layout
  50. A narrow flexbox layout
  51. Sizing flex items on a content basis
  52. Auto flex basis and flex item widths
  53. Default sizing of flex items
  54. Sizing flex items with length-unit flex bases
  55. Sizing flex items with percentage flex bases
  56. 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
  57. Flex growth in auto and zero flex bases
  58. Flex items shrink but won't grow when flex: initial is set
  59. Flex items can grow and shrink when flex: auto is set (TK WRONG LINK IN CONTENT TK)
  60. With flex: none, flex items will neither grow nor shrink (TK WRONG LINK IN CONTENT TK)
  61. Flexing using a single numeric value (TK WRONG LINK IN CONTENT TK)
  62. Reordering flex items with the order property (TK NO ICON FOR LINK TK)
  63. Flex items appear in order of ordinal groups, by source order within their group (TK NO ICON FOR LINK TK)
  64. Changing the order will change the visual order, but not the tab order