Flexbox
What is Flexbox?
The Flexible Box Model is a one dimensional layout model that provides a method to offer space distribution and powerful alignment capabilities.
Flex Containers & Flex Items
The flex container is the element that holds flex items. Flex items are direct children of flex containers.
A container is created with display: flex;
<div class="flex-container">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<img src="pic.jpg" alt="Also a flex item" />
</div>
| Flex Container Properties | Flex Item Properties |
|---|---|
flex-direction | order |
flex-wrap | flex-grow |
flex-flow | flex-shrink |
justtify-content | flex-basis |
align-items | align-self |
align-content |
The Axes
There are two axes to keep in mind when using flexbox: the main axis, and the cross axis.
The main axis is always along the direction of the flex-direction, and the cross-axis is always perpendicular to it. flex-direction is either row or column.
