flexbox Getting started with flexbox Flexbox Introduction

Example

The Flexbox (Flexible box) layout, introduced in CSS3 provides a more efficient way to lay out, align and distribute space among children elements(flex items) within a container element(flex container). Most importantly even when their sizes are unknown or dynamic and hence the term "flex" or "flexible".

Lets start with the basics and see how an container can be initialized as flex.

Consider the following markup:

<div class="flex-container">
  <div class="flex-item-1"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-3"></div>
</div>

A flexbox is initialized by simply using display: flex. Done!

.flex-container {
  height: 100px;
  padding: 10px;
  background: grey;

  display: flex; // or display: inline-flex;
}

Now that the flex container is ready, let us play around with its flex items giving them a width of say 25% each and horizontally center aligning the flex items inside their parent container.

.flex-item-1 {
  width: 25%;
  background: green;
}

.flex-item-2 {
  width: 25%;
  background: purple;
}

.flex-item-3 {
  width: 25%;
  background: pink;
}

Please note, I have purposely given the 3 children a width of 25% each to show how easy it is to move around the children within a flexbox.

Now when we run the above code, we should see the 3 children within the container horizontally next to each other. This is because by default, a flexbox has the property flex-direction: row. Meaning by default the flex items will be aligned horizontally next to each other. Also there should be a gap on the right since the total width of the children didn't add upto 100%.

Now try adding the property justify-content: center to the flex-container.

.flex-container {
  ...
  justify-content: center;
}

The result would be the children being horizontally center aligned. The same property has other values such as flex-end(align to the right), space-around(equal space around the items), space-between(equal space between the items).

Important: Other block element properties like text-align: center etc. has no effect on a flex element.