CSS tutorial series: CSS flexbox (manipulating flex items)

in the previous tutorial CSS tutorial series: CSS Flexbox (working with flex container) 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

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

<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>

* {
  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;
}

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

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

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

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

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

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

CSS flex shrink property

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.

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


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

If you've set a fixed width this property will not work

CSS flex basis property

.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
}

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

.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

CSS align self property

this property specifies the alignment of the flex item along the cross axis. No fixed width or height was specified

.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;
}