A **flexbox** provides powerful alignment options by giving the user control over properties like alignment, order, and direction.

Some terminology:
* **flex container:** groups flex items together to control their representation.
* **flex items:** direct children of the flex container.

## Properties
There are six container properties:

* flex-direction
* flex-wrap
* justify-content
* align-items
* flex-flow
* align-content


Let's see how each of these properties are used:

![](/api/edpresso/shot/6029663757402112/image/5075062581362688)

# `flex-direction`

Determines the direction in which the items ne​ed to be placed.

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-items{
  margin: 10px;
}

<html>
 <head>
 </head>
 <body>

<div class="flex-container">
  <button  class="flex-items">Cappuccino</button>
  <button  class="flex-items">Espresso</button>
  <button  class="flex-items">Macchiato</button>
</div>
 </body>
</html>

codemirror

# `flex-wrap`

Defines if items should wrap or not.

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-items{
  margin: 10px;
}

<html>
 <head>
 </head>
 <body>

<div class="flex-container">
  <button  class="flex-items">Cappuccino</button>
  <button  class="flex-items">Espresso</button>
  <button  class="flex-items">Macchiato</button>
  <button  class="flex-items">Latte</button>
  <button  class="flex-items">Caramel Crunch</button>
  <button  class="flex-items">Mocha</button>
  <button  class="flex-items">Vanilla Coffee</button>
</div>
 </body>
</html>

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.flex-items{
  margin: 10px;
}

# `align-items`

Aligns the items vertically.

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-items{
  margin: 10px;
}

 ### `flex-flow`

Sets the flex-wrap and flex-direction together.

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-items{
  margin: 10px;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-content: stretch;
  height: 200
}

.flex-items{
  margin: 10px;
}

To learn more, refer to the [official documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).

What is a CSS flexbox?

Properties

`flex-direction`

`flex-wrap`

`justify-content`

`align-items`

`flex-flow`

`align-content`