Flex Box Properties in CSS


CSS Flexbox is a layout module that allows you to create flexible and responsive layouts. Here are some of the most commonly used Flexbox properties in CSS:

Before starting with the flexbox properties, we should understand which properties meant for flex container and flex items

Flexbox Container Properties

  • display
  • flex-direction
  • flex-wrap
  • justify-contents
  • align-items
  • align-contents

Flexbox Item Properties

  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
  • order
  1. display: This property specifies the display behavior of an element. To use Flexbox, you need to set the display property to flex or inline-flex.
  2. flex-direction: This property specifies the direction of the Flexbox layout. You can set it to row (horizontal), column (vertical), row-reverse, or column-reverse.
  3. flex-wrap: This property specifies whether the Flexbox items should wrap or not. You can set it to nowrap (default), wrap, or wrap-reverse.
  4. justify-content: This property specifies how the Flexbox items are distributed along the main axis. You can set it to flex-start, flex-end, center, space-between, space-around, or space-evenly.
  5. align-items: This property specifies how the Flexbox items are aligned along the cross axis. You can set it to flex-start, flex-end, center, stretch, or baseline.
  6. align-content: This property specifies how the Flexbox lines are aligned when there is extra space in the container. You can set it to flex-start, flex-end, center, space-between, space-around, or stretch.
  7. flex-grow: This property specifies how much an item should grow relative to the other items in the Flexbox container.
  8. flex-shrink: This property specifies how much an item should shrink relative to the other items in the Flexbox container.
  9. flex-basis: This property specifies the initial size of an item before any remaining space is distributed.

These are just some of the most commonly used Flexbox properties in CSS. By mastering these properties, you can create flexible and responsive layouts that adapt to different screen sizes and devices.

CSS Tutorial


Properties Reference


Cascading Style Sheet


Flexbox Tutorial


CSS Grid Tutorial


Transitions Properties


CSS Properties with Examples


CSS Selectors


CSS Pseudo Elements


CSS Attribute Selectors


Input Pseudo Classes


CSS Examples


CSS Animation Projects