# Flexbox
**Flexbox** is a module in HTML/CSS that is used to style a number of #key# elements: called flex-items #key# in a larger #key# container object: called the flex-container #key#.

A flexbox has several properties:
1. **`display`** is used to define the flex-container and to specify that something is going to be a flex-container. The `display` property should be given the value of `flex`.
2. **`flex-direction`** defines the main axis. The default value is `row`, i.e., horizontal left to right. Other options include `row-reverse`, `column` (i.e., top to bottom), and `column-reverse`.
3. **`flex-wrap`** defines how to wrap items in lines. By default, this property has the `nowrap` value, which tries to fit everything in a single line. Other options include `wrap`, which overflows items into other lines, and `reversewrap`, which starts from the bottom and overflows items to the lines above.
4. **`order`** defines the order of individual items in the list. By default, items are placed in the order of the source code, but integer numbers can be used with the `order` property to order items in flex-containers.
5. **`flex-grow`** and **`flex-shrink`** define, using a ratio, how many individual items could grow or shrink if required.

# Usage
The following example demonstrates how flexbox can be used.


.flex-example{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
.flex-one{
    order: 1;
    flex-grow: 1;
}
.flex-two{
    order: 2;
    flex-grow: 1;
}
.flex-three{
    order: 3;
    flex-grow: 2;
}
.flex-four{
    order: 4;
    flex-grow: 2;
}
.flex-five{
    order: 5;
    flex-grow: 1;
}
.flex-example li{
  padding: 5px;
  margin: 5px;
  line-height: 50px;
  text-align: center;
}
.straight li{
  background-color: lightblue;
}
.reverse{
    flex-direction: row-reverse;
}
.reverse li{
    background-color: lightgoldenrodyellow;
}

codemirror

This example shows a few properties of flexbox in use. For instance, using the `order` property, 2 has been placed after 1 despite being out of position in the HTML file. Also, using the `flex-grow` property, 3 and 4 have been given double the space the others received. A reverse list has also been produced using `flex-direction`.

How to use Flexbox in HTML

Flexbox allows styling of elements within a container using properties like display, flex-direction, flex-wrap, order, flex-grow, and flex-shrink.