# FlexBox CSS Explained

### Flexbox is a layout mechanism designed for laying out groups of items in one dimension. Learn how to use it in this module.

### Things can we do with Flex layout:

1. They can display as a row, or a column.
    
2. They respect the writing mode of the document.
    
3. They are single line by default, but can be asked to wrap onto multiple lines.
    
4. Items in the layout can be visually reordered, away from their order in the DOM.
    
5. Space can be distributed inside the items, so they become bigger and smaller according to the space available in their parent.
    
6. Space can be distributed around the items and flex lines in a wrapped layout, using the Box Alignment properties.
    
7. The items themselves can be aligned on the cross axis.
    

## Axes in flex:

The key to understanding flexbox is to understand the concept of a main axis and a cross axis. The main axis is the one set by your `flex-direction` property. If that is `row` your main axis is along the row, if it is `column` your main axis is along the column.

The cross axis runs in the other direction to the main axis, so if `flex-direction` is `row` the cross axis runs along the column.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673543939236/1bceca37-b034-4bba-b493-e1d00db972f2.png align="center")

## Controlling direction of items in flex:

Even though you haven't added a `flex-direction` property yet, the items display as a row because the initial value of `flex-direction` is `row`. If you want a row then you don't need to add the property. To change the direction, add the property and one of the four values:

* `row`: the item layout as a row.
    
* `row-reverse:` the layout of the items as a row from the end of the flex container.
    
* `column`: the items lay out as a column.
    
* `column-reverse` : the layout of the items as a column from the end of the flex container.
    

## Wrapping flex-items:

The initial value of the `flex-wrap` property is `nowrap`. This means that if there is not enough space in the container the items will overflow.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673544408577/3a7275a8-5b67-464e-afbf-05f21cc5f2e2.png align="center")

Items displaying using the initial values will shrink as small as they can, down to the `min-content` size before overflow happens.

To cause the items to wrap add `flex-wrap: wrap` to the flex container.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673544465759/9e91318c-c633-41c9-8430-970ee6fe8156.png align="center")

## Controlling space inside flex items:

Assuming our container has more space than is needed to display the items, the items line up at the start and do not grow to fill the space. They stop growing at their max-content size. This is because the initial value of the `flex-` properties is:

* `flex-grow: 0`: items do not grow.
    
* `flex-shrink: 1`: items can shrink smaller than their `flex-basis`.
    
* `flex-basis: auto`: items have a base size of `auto`.
    

This can be represented by a keyword value of `flex: initial`. The `flex` shorthand property, or the longhands of `flex-grow`, `flex-shrink` and `flex-basis` are applied to the children of the flex container.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673544546582/32ff2a30-b338-4b5a-a9a8-3bc4afba07a7.png align="center")

To cause the items to grow, while allowing large items to have more space than small ones use `flex:auto`. You can try this using the demo above. This sets the properties to:

* `flex-grow: 1`: items can grow larger than their `flex-basis`.
    
* `flex-shrink: 1`: items can shrink smaller than their `flex-basis`.
    
* `flex-basis: auto`: items have a base size of `auto`.
    

> Thanks for reading this blog! 😊