Flexbox Quick Survival Guide (Child Properties Edition)

Intro

Today’s topic is going to be about some of the basic properties you can do for child properties within flexbox! We will be talking about order, flex-grow, flex-shrink, flex, and align-items.

order

This property allows you to change the order of items that are within the flex container.

.header {
   order: 2;
}

flex-grow

This property allows your item to grow within the space that is available in the container. By default, the items/content will be set to 1.

.content1 {
   flex-grow: 2;
}

In the example above, we set the flex-grow to 2 so that item will be two times the size of the other items/content when it grows.

flex-shrink

This property does the same as grow but just shrinks it instead.

.content {
   flex-shrink: 2;
}

flex

This property is used as a shortcut for flex-grow, shrink, and basis. Shrink and basis are optional parameters.

.content {
   flex: flex-grow value, flex-shrink value, flex-basis value;
}

align-self

This property allows you to align the items in the area you want within the flex container. This means you can use the following for the values: flex-start, flex-end, center, and center

content {
   align-self: flex-start 
}