Flex-box layout properties and live demo
Tags: webdev, css, frontend, tutorial
Published: 2023-07-05 17:30:31

Flexbox allows you to create a responsive layout that is flexible to the window size.

In this post, I would share some of the important flex-box properties. There is also a demo at the end.

## Ordering content with `order:0...` using flexbox
_[Child item property]_

The higher the order, the later that item comes. 

**Syntax:**

```css
.child-item {
   order:0;
}
```

In case of a row layout, the higher order item is pushed to the extreme right.

In case of a column layout, the higher order item is pushed to the very end.

By default, the order is 0 of all items.

**Example:**

```
    .red {
      background-color: #eb4d4b;
    }

    .green {
      background-color: #6ab04c;
      order: 1;
    }

    .indigo {
      background-color: #30336b;
      order: 2;
    }     

```


```HTML
    <div class="green">order:1</div>
    <div class="indigo">order:2</div>
    <div class="red">order:0</div>

```

**Output**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukioln4zmzejd8ekpri0.png)



## Enabling wrap with `flex-wrap` using flexbox

_[Parent property]_

Wrap allows you to control the content in horizontal layout when you run out of space.

By default wrap is disabled.

**Syntax:**

```css
.container{
   flex-wrap: nowrap | wrap;
}

```

When `wrap` is enabled, the items are pushed to the next line, if the screen is shrunk and space runs out.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54bab0owudp1j38m96io.png)




## Justifying content using flexbox
_[Parent property]_

- `justify-content: flex-start;`: Items are bunched up to the left.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk3icnv18pmpjyu3x1ot.png)


- `justify-content: flex-end;`: Items are bunched up to the right.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ec2tvpdj4bfd5pmrea8.png)


- `justify-content: center;`: Items are aligned to the  center.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3knpboip0gsa4m9bfdh2.png)


- `justify-content: space-between;`: Items have space between them.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh35aebunps7ph4951rb.png)



## Aligning content across a container using flexbox
_[Parent property]_

For the `align-items` to properly work, you need to set the height of the container.

- `align-items: flex-start;`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78erdweoo6kpm5z4fr9a.png)



- `align-items: flex-end;`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tthpcuj8g976rf9go8vb.png)


- `align-items: center;`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10hmucx3xbg91rhnlyta.png)



## Demo
You can view a live preview of the flexbox layout concepts in this [link](https://zairahira.github.io/flex-box/).
Feel free to experiment and play around :)

## Wrapping up

I hope you found this tutorial helpful. Thank you for reading till the end.

I would love to connect with you on any of these  [platforms](https://zaira_.bio.link/).

[![Image description](https://res.cloudinary.com/practicaldev/image/fetch/s--lTK5eo7c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfwvazd9y2xuvmdl1746.png)](https://bmc.link/zairah)