9. Flexbox

BootCamp by Dr.Angela

1. Display: Flex

• ex).container { display: flex; gap: 10px; }
• When display: flex is applied, all child elements are laid out in a single row by default.
• The flex layout ignores traditional display types (inline, block, inline-block, none) for child elements.
• inline-flex:
  • Similar to inline-block
  • The container behaves like an inline element (like <span>)
  • The container’s width adjusts to fit its content (based on the largest child item)
  • Flex rules still apply to its children

2. Flex Direction

• flex-direction
  • row (default): main axis(→), cross axis(↓)
  • column: main axis(↓), cross axis(→)
  • row-reverse / column-reverse : Reverses the start / end order along the main axis
• flex-basis -Defines the initial size of an individual flex item along the main axis -Applied to flex items only, not the flex container -Acts like width in row direction and height in column direction

3. Flex Layout

• order: 0; (default)
  • Applies to flex items
  • Higher values appear later along the main axis (to the right in row)
• flex-wrap(applies to the container)
  • nowrap (default): all items stay on one line
  • wrap: items wrap onto multiple lines
  • wrap-reverse: items wrap in the opposite direction
• justify-content (main axis) : flex-start, flex-end, center, space-between, space-around, space-evenly
• align-items (cross axis, single line): flex-start / flex-end / center / baseline / stretch
  • Requires a defined container_ height _(e.g. height: 70vh)
  • Works when items are not wrapped
  • align-self (individual item): Overrides align-items for a single flex item, Uses the same values as align-items
• align-content (cross axis, multiple lines): flex-start, flex-end, center, space-between, space-around, space-evenly, stretch
  • Requires flex-wrap: wrap;
  • Controls spacing between rows or columns
• flex-flow : row wrap, column wrap
  • Shorthand for flex-direction + flex-wrap
• CSS-Tricks Flexbox Guide :
• Flexbox Froggy (Practice Game) :

4. Flex Sizing

• Sizing Priority (low → high): Content size < width < flex-basis < min-width / max-width
• Content-based sizes
  • min-content: based on the longest word (minimum possible width)
  • max-content: based on all content on one line (maximum possible width)
• Flex Grow / Shrink
  • flex-grow: controls how much an item grows when extra space is available
  • flex-shrink: controls how much an item shrinks when space is limited
  • 0: no growing or shrinking
• flex shorthand
  • ex. flex: 1(flex-grow: grow ratio) 1(flex-shrink: shrink ratio) 0(flex-basis);
  • Space is distributed proportionally based on grow/shrink values