0Pricing
CSS Academy · Lesson

Display Flex and Flex Direction

Enable flexbox on a container and control the main axis direction with flex-direction.

Enabling Flexbox

Flexbox is activated by setting display: flex on a container element (the flex container). Its direct children automatically become flex items.

.nav {
  display: flex;
}
/* All direct children of .nav are now flex items */

Inline Flex

display: inline-flex creates a flex container that flows inline (like inline-block) instead of as a block. The internal flexbox behavior is identical.

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

All lessons in this course

  1. Display Flex and Flex Direction
  2. Justify-Content and Align-Items
  3. Flex Wrap and Align-Content
  4. Flex Grow Shrink and Basis
← Back to CSS Academy