Flexbox in CSS

Table of contents

1. Preface
   1. Conventions Used in This Book
   2. Using Code Examples
   3. O’Reilly Safari
   4. How to Contact Us
2. 1. Flexbox
   1. The Problem Addressed
   2. Simple Solutions
   3. Learning Flexbox
      1. The display Property
3. 2. Flex Container
   1. Flex Container Properties
      1. The flex-flow Shorthand Property
      2. The flex-direction Property
      3. The flex-wrap Property
   2. Flex Line Cross Dimension
   3. Flex Container
   4. The justify-content Property
      1. justify-content Examples
   5. The align-items Property
      1. align-items: stretch
      2. align-items: flex-start
      3. align-items: flex-end
      4. align-items: center
      5. align-items: baseline
      6. Additional Notes
   6. The align-content Property
4. 3. Flex Items
   1. What Are Flex Items?
      1. Flex Item Features
      2. min-width
   2. Flex Item–Specific Properties
   3. The flex Property
   4. The flex-grow Property
      1. Non-Null Growth Factor
      2. Growing Proportionally Based on Growth Factor
      3. Growth Factor with Different Widths
      4. Growth Factors and the flex Property
   5. The flex-shrink Property
      1. Proportional Based on Width and Shrink Factor
      2. In the Real World
      3. Differing Bases
   6. The flex-basis Property
      1. content
      2. auto
      3. Default Values
      4. Length Units
      5. Zero Basis
   7. The flex Shorthand Property
      1. Common flex Values
      2. Custom flex Values
   8. Sticky Footer with flex
   9. The align-self Property
   10. The order property
       1. Tabbed Navigation Revisited
5. 4. Flexbox Examples
   1. Responsive Two-Column Layout
      1. Wider Screen Layout
   2. Power Grid Home Page
      1. Sections
   3. Vertical Centering
   4. Inline Flex Example
   5. Calendar
   6. Magic Grid
      1. Performance
      2. Good to Go