Flexbox Examples

These examples are to accompany the Flexbox articles on MDN.

Basic concepts of flexbox

  1. The flex container
  2. The flex-direction property
  3. Multi-line flex containers
  4. The flex-flow shorthand
  5. The flex properties
  6. Flex shorthands
  7. Align items
  8. Justify content

Relationship to other layout methods

  1. Writing Modes
  2. Floated layout
  3. Simple flex layout
  4. Simple grid layout
  5. Demo of display: contents

Alignment

  1. Centering a box
  2. Alignment on the cross axis with align-items
  3. Aligning individual items with align-self
  4. Changing the main axis to column and aligning items
  5. Aligning content on the cross axis
  6. Changing the main axis to column
  7. Main axis alignment with justify-content
  8. Main axis alignment with flex-direction column
  9. Main axis alignment in RTL writing mode
  10. Main axis alignment with reversed row
  11. Alignment with auto margins

Order

  1. The flex-direction property
  2. The order property
  3. Using negative values for order
  4. A usecase for the order property

Ratios on the main axis

  1. Concepts of min and max-content
  2. The flex-basis property
  3. The flex-grow property
  4. Ratios and the flex-grow property
  5. The flex-shrink property
  6. min-content sizing and the flex-shrink property
  7. Ratios and the flex-shrink property

Mastering wrapping of flex items

  1. Wrapping when flex-direction is row
  2. Wrapping when flex-direction is column
  3. Wrapping when flex-direction is row-reverse
  4. Grid and two-dimensions
  5. A flexbox grid
  6. Gaps between flex items
  7. Setting an item to visibility: collapse
  8. Wrapped items with visibility: collapse

Common Use Cases of Flexbox

  1. Navigation
  2. Navigation distributing space to items
  3. Split navigation
  4. Centering an item
  5. Card layout
  6. Media object
  7. Flipped media object
  8. Input element and button
  9. Adding a label to the input and button