Skip to main content

CSS flexible box layout

The CSS flexible box layout module defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

Flexible box layout in action​

In the following example a container has been set to display: flex, which means that the three child items become flex items. The value of justify-content has been set to space-between in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of align-items being stretch. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 600)}}

Reference​

Properties​

  • {{cssxref("align-content")}}
  • {{cssxref("align-items")}}
  • {{cssxref("align-self")}}
  • {{cssxref("flex")}}
  • {{cssxref("flex-basis")}}
  • {{cssxref("flex-direction")}}
  • {{cssxref("flex-flow")}}
  • {{cssxref("flex-grow")}}
  • {{cssxref("flex-shrink")}}
  • {{cssxref("flex-wrap")}}
  • {{cssxref("justify-content")}}

Glossary terms​

  • {{Glossary("Flexbox")}}
  • {{Glossary("Flex container")}}
  • {{Glossary("Flex item")}}
  • {{Glossary("Main axis")}}
  • {{Glossary("Cross axis")}}
  • {{Glossary("Flex")}}

Guides​

CSS display module

  • {{cssxref("display")}}
  • {{cssxref("order")}}

CSS box alignment module

  • {{cssxref("align-content")}}
  • {{cssxref("align-items")}}
  • {{cssxref("align-self")}}
  • {{cssxref("column-gap")}}
  • {{cssxref("gap")}}
  • {{cssxref("justify-items")}}
  • {{cssxref("place-content")}}
  • {{cssxref("place-items")}}
  • {{cssxref("row-gap")}}

CSS box sizing module

  • {{cssxref("aspect-ratio")}}
  • {{cssxref("max-content")}} value
  • {{cssxref("min-content")}} value
  • {{cssxref("fit-content")}} value
  • {{glossary("intrinsic size")}} glossary term

Specifications​

See also​