# Flexbox

The flex layout consists of parent container referred as *flex container* and its **immediate children** which are called *flex items*.

## The Container

To create a flex container, just set the display property to flex. All of its immediate children will now be considered flex items.

```css
.flex-container {
    display: flex;
}
```

![](https://836634774-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeN44h3QMT7WRlkbx4e%2Fsync%2F21db43d1da24eb1b8f4e1969eb6563756a295e00.png?generation=1626049183172798\&alt=media)

## The Container Items

![](https://836634774-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeN44h3QMT7WRlkbx4e%2Fsync%2Fc47f8af8fab54919b8ea959828af3b34b1d9ef50.png?generation=1626049183061497\&alt=media)

### Container properties

* **flex-direction** - specifies flow of the flex items

![](https://836634774-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeN44h3QMT7WRlkbx4e%2Fsync%2F8cc6bf8aba3498936d9628867c37f65cb30a585d.png?generation=1626049182572496\&alt=media)

* **flex-wrap** - specifies whether the flex items should wrap if necessary and how.

![](https://836634774-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeN44h3QMT7WRlkbx4e%2Fsync%2F22b54ff8facc90586fda9540466d031494ecb59d.png?generation=1626049182702049\&alt=media)

* **justify-content** - aligns flex items along main axis of container distributing free space among the items. 

![](https://836634774-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeN44h3QMT7WRlkbx4e%2Fsync%2F80923f89735e6fb953faa7a0a9e62c46603d25bb.png?generation=1626049183054273\&alt=media)

* **align-items** - align flex items in the cross-axis direction.

![](https://836634774-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeN44h3QMT7WRlkbx4e%2Fsync%2Fb2cf7da9d774b10513ec90f9d95df7a1cbaa188c.png?generation=1626049183354139\&alt=media)

### Flex Item properties

* **order** - the order of the item within the children (default to position in HTML)

![](https://836634774-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeN44h3QMT7WRlkbx4e%2Fsync%2Fa4278e7a5f744c4f958fa450eb60cdd7c020df3b.png?generation=1626049182825832\&alt=media)

* **flex-grow** - how much the flex item will grow in relation to other items when positive free space is distributed.

![](https://836634774-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeN44h3QMT7WRlkbx4e%2Fsync%2Fae703cf0eb6fceec102aa56910b7e431bc3f2fb4.png?generation=1626049182745360\&alt=media)

* **flex-shrink** - how much the flex item will shrink in relation to other items when negative free space is distributed.

## Resources

{% embed url="<https://css-tricks.com/snippets/css/a-guide-to-flexbox/>" %}

{% embed url="<https://scrimba.com/learn/flexbox/your-first-flexbox-layout-flexbox-tutorial-canLGCw>" %}