The concepts of
Flexbox

1. Flex container setup

   1. Create a flex container

      With display: flex or display: inline-flex.

   2. Identify flex items

      Child boxes escape Flexbox with position: absolute, text runs get wrapped in an anonymous box.

   3. Set main direction

      With flex-direction.

   4. Allow flex items to wrap

      With flex-wrap.

   5. Calculate available space for flex items

      Flex items are laid out into the flex container’s content box. Its size depends on how the flex container itself is laid out.

   6. Insert gaps between flex items and flex lines

      With gap.

   7. Stretch flex lines

      With align-items. A flex item will listen to this suggestion if it has align-self: auto.

   8. Suggest stretching to flex items

      With align-items. A flex item will listen to this suggestion if it has align-self: auto.

   9. Align flex items in the main direction

      With justify-content.

   10. Align and distribute flex lines

       With align-content.

2. Sizing

   1. Set the flexibility of flex items in the main direction

      With flex-shrink and flex-grow. You can set this separately on each flex item.

   2. Order flex items

      With order. Lower numbers come first. Box tree order is used when two flex items have the same number.

   3. Ask for a flex base size

      Each flex item says how big it wants to be with flex-basis before it shrinks or grows.

   4. Collect flex items into flex lines

      Using the order and flex base size of each flex item.

   5. Resolve flexible flex item sizes

      Shrink or grow the flex items depending on the remaining space.

   6. Get the hypothetical size of flex items

      How big would each flex item be before any stretching happened?

   7. Get the hypothetical size of flex lines

      How big does a flex line need to be to fit its flex items, before any stretching happens?

   8. Stretch flex lines to fill the flex container

      If you set align-content to normal or stretch on the flex container.

   9. Stretch flex items to fill their flex line

      With align-self: stretch, or by listening to the flex container’s align-items suggestion.

3. Alignment

   1. Remaining flex line space in the main direction

   2. Auto margins in the main direction

   3. Align and distribute flex items in the main direction

   4. Remaining flex line space in the cross direction

   5. Auto margins in the cross direction

   6. Flex items align themselves in the cross direction

   7. Remaining space in the flex container in the cross direction

   8. Align and distribute flex lines in the cross direction

4. Advanced Concepts

   1. Automatic minimum size of flex items

   2. Aspect ratio transfer across axes

   3. Shrinking flex items

      Flex items will be asked to shrink if they asked for more space than is available. flex-shrink sets if they will say yes.

   4. Growing flex items

      If flex items get their flex base size and there’s room left, they’re offered to grow. flex-grow sets if they will say yes.

   5. Percentages

   6. Mixing writing modes

   7. Animating flex properties

   8. How box sizing affects flex sizing

   9. Content-based sizing