CSS – An Introduction to Flexbox
Tags: css, webdev, codenewbie, beginners
Published: 2020-05-24 12:42:12

The [Flexible Box Layout](https://www.w3.org/TR/css-flexbox-1/) Module (Flexbox) is a useful and easy-to-use CSS module that helps us to make our content responsive. Flexbox takes care of any spacing calculations for us, and it provides a bunch of ready-to-use CSS properties for structuring content.
You can play with some sample [code](https://codepen.io/rajeshdh/pen/ExVrNPz) here. 

Flexbox has two components, a parent container and child items. Flexbox module provides us with a set of different CSS properties. We apply some of those properties on the parent container, also called a flex container and others on its collection of children or flex items. 

For example:
Consider the following block.

    <div class='container'>
        <div>item 1</div>
        <div>item 2</div> 
    </div>

To apply a flexbox layout to the above block, we just need to add a CSS property of `display:flex` to it.

    .container {
       display: flex
     }

When we set the display property to flex for any element. It becomes a flex container and all child items of the container become flex items.

This applies a few defaults on the items inside the container, eg. 

The default direction is **row** . Items start from the **starting edge of the main axis**. Items **do not stretch** out on the main dimension **but can shrink**. Items **will stretch to fill the size of the cross axis**. `flex-basis` is set to `auto`, and `flex-wrap` is set to `nowrap`. 

**Properties for the flex container:**

**flex-direction** -the direction of the content (horizontal or vertical)
**flex-wrap** - control wrapping of items in one line or multiple lines
**flex-flow** - shorthand for `flex-direction and flex-wrap`
**justify-content** - control layout positioning on the main axis (horizontal positioning)
**align-items** - control layout positioning on the cross axis (vertical positioning)
**align-content** - control layout alignment when there is multiline content.

**Properties for the flex items:**

**order** - control the order or appearance of the items inside the container.
**flex-grow** - controls the stretch behaviour of items relative to other items, or how much space an item can take up to fill the space.
**flex-shrink** - controls the shrink behaviour of items relative to the other items, or how much smaller an item can become when adjusting for space.
**flex-basis** - specifies the initial length of a flex item.
flex - shorthand for the  `flex-grow, flex-shrink, and flex-basis`
**align-self** - specify the alignment of the individual item inside flex container; this also overrides the default alignment set by align-items.

**Flexbox** is meant for **one-dimensional layout**, meaning you can create a layout for your content in one direction, either horizontal or vertical. 

To understand more about the concept of directions, we need to learn about the **concept of axis** followed by flexbox layout. Axis are the core to understand the flexbox layout.

In flexbox we have: 
**main axis:** horizontal or left to right or right to left.
**cross axis:**  vertical, top to bottom or bottom to top. 

We can change direction by using the `flex-direction` property. The default value for `flex-direction` is `row`, which means the content is displayed horizontally. For `cross-axis`, we can assign it to  `column` value.

**flex property** - We can use flex property on **flex items** to make them responsive. The flex property is a shorthand for three other properties, **flex-grow, flex-shrink, flex-basis.**  It is better than setting percentage width of the items, e.g. `width: 33.333%`

**Ordering items:**
We can change the order in which items appear with order property. 
Default is 0. 

I have created a [codepen](https://codepen.io/rajeshdh/pen/ExVrNPz) with some typical usage example of the flex layout.
You check also check out [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)  and [Basic Concepts of flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) for more details about the flexbox layout.