flex, flex-direction, flex-wrap — CSS Technical Interview Questions & Answers

Core Flexbox container/item properties.

flex, flex-direction, flex-wrap

  • Core Flexbox container/item properties.
  • Flexbox lays items in a row or column. display:flex on the parent. flex-direction: row or column. gap for space. justify-content along the main axis, align-items on the cross axis.
  • Use it for nav bars and toolbars. Wrap with flex-wrap: wrap on small screens.
  • Trap: flex on every nested div until nobody can debug. Trap: forgetting wrap on mobile.

Technical Interview Tip: display:flex; gap: 8px; flex-wrap: wrap;

Code Examples for flex, flex-direction, flex-wrap

flex, flex-direction, flex-wrap — working example

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.item {
  flex: 1 1 200px; /* grow | shrink | basis */
}

flex, flex-direction, flex-wrap — flexbox is one-dimensional: justify = main axis, align = cross axis; gap spaces items.

How to Explain flex, flex-direction, flex-wrap to an Interviewer

What does display:flex do?

Children line up in a row (default) Parent controls them