CSS tutorial series: CSS flexbox (manipulating flex items)
Tags: beginners, css, webdev, tutorial
Published: 2023-01-21 09:24:48

in the previous tutorial [CSS tutorial series: CSS Flexbox (working with flex container)] (https://dev.to/fullstackjo/css-tutorial-series-css-flexbox-40l3) we’ve seen how to use flexbox properties on the flex container to position its children. Flexbox has additional properties which lets you gain more control over its flex items. 
_The same base template is going to be used throughout this entire tutorial._

## CSS order property

|Property| Value |
|--------|:-----:|
|`order` |this property allows you to change the order in which the flex items are displayed.|

The default value of this property on each `flex item` is `0`, this means that if you apply this property on the first `flex item` it will take the place of the last `flex item`

```HTML
<div class=“flex-container”>
<div class=“flex-item">First item</div>

<div class=“flex-item">Second item</div>

<div class=“flex-item">Third item</div>

<div class=“flex-item">Fourth item</div>

<div class=“flex-item">Fifth item</div>

</div>
```

```CSS
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.flex-container {
  background-color: black;
  color: white;
  margin: 2rem;
  height: 300px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-item {
  background-color: gray;
  text-align: center;
  height: 200px;
  width: 200px;
  font-size: 1.5rem;
  font-weight: bold;
}

.flex-item:nth-child(1) {
  order: 1;
}
```

![order property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhtypq7vvkmxuly0pf9x.png)

The `flex item` with the largest value comes last in order. Let's see: 

```CSS
.flex-item:nth-child(1) {
  order: 1;
}

.flex-item:nth-child(2){
  order: 2;
}

```

![order property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5bomwj17gmctxaoll2h.png)

As we can see the value of the `order` property of the second child of the `flex items` has a larger value than the first child child of the `flex items` meaning the second child will come right after the first according to the values of the `order` property.

## CSS flex grow property

|Property| value|
|--------|:----:|
|`flex-grow`|This property specifies how much of the remaining space in the flex container should be assigned to the item|

The default value of the flex grow property is `0`.

let’s say we set the property flex-grow to be 1 on the fourth `flex item`
that item will take up twice the space as the others 

```CSS
.flex-item:nth-child(4){
  flex-grow: 1;
}
```

![flex grow property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqm594n6uxyiai3kjswq.png)

## CSS flex shrink property

|Property| Value|
|--------|:----:|
|`flex-shrink`|	determines how much the item will shrink  relative to the other items |

the default value is 1 which will make the items shrink to fit the flex container in case there was not enough space.

when set `flex-shrink` to `0` on a specific flex item, that item will not shrink and will not wrap its content meaning that its siblings will shrink to give it space which in some cases an overflow might happen.

```CSS
.flex-item {
  background-color: gray;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}


.flex-item:nth-child(4){
  flex-shrink: 0;
}

```

![flex shrink property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n9aaxnq21unilzhmjb3.png)

_If you've set a fixed width this property will not work_

## CSS flex basis property
|property| value|
|--------|:----:|
|`flex basis`|this property defines the initial space of a flex item |

```CSS
.flex-item {
  background-color: gray;
  text-align: center;
  height: 200px;
  width: 200px;
  font-size: 1.5rem;
  font-weight: bold;
}


.flex-item:nth-child(4){
  flex-basis: 400px
}
```


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

## CSS flex property

This property is a shorthand and it accepts the values of the previously mentioned properties `flex grow`, `flex shrink` and `flex basis` respectively Let’s look at an example 

```CSS
.flex-item {
  background-color: gray;
  text-align: center;
  height: 200px;
  font-size: 1.5rem;
  font-weight: bold;
}


.flex-item:nth-child(2), .flex-item:nth-child(4){
  flex:1 1 400px;
}
```

the flex grow and flex shrink is set to 1 and the flex basis is set to 400px on the second and fourth item


![flex property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uwhz4gvk72kbod0hzip.png)

## CSS align self property 
this property specifies the alignment of the flex item along the cross axis. _No fixed width or height was specified_

```CSS
.flex-item {
  background-color: gray;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}


.flex-item:nth-child(2),.flex-item:nth-child(4){
  align-self: center;
}
```

![align self property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ei51s0gh5b7obpqcpxfw.png)