flexbox Getting started with flexbox Flexbox Containers and Items

Example

Flexbox or flexible box is a layout method for arranging content on a page in a predictable manner. Flexbox provides an improvement over traditional block model positioning using floats or even table like positioning for content on the page.

At its core, Flexbox can be broken down into a parent element (flex container) and a child element (flex item).

Flex Container

A flex container can be created by setting its display property to flex:

.container {
  display: flex;
}

Flex item

Every child element of a flex container becomes a flex item. These flex items can then receive additional properties to modify how its positioned on the page.

.item {
  flex: 1;
}

This flex: 1 property is shorthand for flex-grow: 1 enabling it to grow relative to its siblings within the container.

Putting these together this is the HTML markup:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>