Flexing with CSS Flexbox

Flexbox also known as flexible box is a type of layout model in CSS that makes it super easy to design responsive layouts.

The whole idea behind the Flexbox layout model is to allow elements to be laid out in any direction, flex their size to either fill up unused space or shrink to avoid overflowing their parent element, either horizontally or vertically.

To truly be able to flex with Flexbox, we have to understand how it works.

Let’s break it down into its properties into two namely;

1. Flex Container
2. Flex Items

Flex Container

This is the parent html element that houses the items you want to lay out.

To use any of the flex properties, this container has to be created.

It’s what creates the context that allows every other flex properties to work.

See the Pen
Flex 1 by Obaseki Nosa (@c0depanda)
on CodePen.

align-items

This allows you to align the items in the flex container vertically, regardless of the height of the item with respect to their flex container or each other.

The values it accepts are: flex-start | flex-end | center | baseline | stretch

See the Pen
Flex – align-items by Obaseki Nosa (@c0depanda)
on CodePen.

justify-content

This is the opposite of align-items, it aligns its item horizontally regardless of the width of the item with respect to their container or each other.

Values: flex-start | flex-end | center | space-between | space-around | space-evenly

See the Pen
justify content by Obaseki Nosa (@c0depanda)
on CodePen.

flex-wrap

The flex-wrap property specifies whether the flex items should break to the next line or not.

By default all flex items will try to fit in a single line, but this property tells the browser to break them into another line when they become way too many to fit in a single line.

This line we speak of is also known as a Flex line.

Values: nowrap | wrap | wrap-reverse

See the Pen
Flex Wrap by Obaseki Nosa (@c0depanda)
on CodePen.

align-content

This property modifies the behavior of the flex-wrap property.

It essentially behaves like the align-items property, only that it aligns the flex lines instead of the flex items.

To make this property work, flex-wrap: wrap has to be set on the flex container and the flex lines have to be more than one.

Values: flex-start | flex-end | center | space-between | space-around | stretch

See the Pen
align-content by Obaseki Nosa (@c0depanda)
on CodePen.

flex-direction

This defines which direction the browser should stack the Flex items i.e vertically or horizontally.

Values: row | row-reverse | column | column-reverse

See the Pen
flex-direction by Obaseki Nosa (@c0depanda)
on CodePen.

flex-flow

This is a shorthand for flex-direction and flex-wrap so instead of writing the below;

.container {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
}

you can just do this;

.container {
   display: flex;
   flex-flow: column wrap;
}

Flex Items

This are the direct children of a Flex container and just like the Flex container, they also have properties that can be applied to them.

orders

This property allows you to change the order in which the Flex items are arranged. i.e according to the HTML structure source code.

Flex items that are within the same container are laid out in ascending order based on the order value, while flex items that have the same order value are laid out in the order they appear in the source code.

Values: <integers> (positive or Negative)

See the Pen
Order by Obaseki Nosa (@c0depanda)
on CodePen.

align-self

As the name implies, the property allows you to align the selected flex item vertically inside its flex container.

It basically works the same way align-items works, only that it’s meant for an individual Flex item.

This is useful for when you only want to align a single Flex item instead of all the Flex items in a Flex container.

Note: This property overrides the flex container’s align-items property.

Values: auto | flex-start | flex-end | center | baseline | stretch

See the Pen
align-self by Obaseki Nosa (@c0depanda)
on CodePen.

flex-basis

This property sets the initial size of the selected flex item. It’s very similar to the way width property works.

The flex-basis property accepts values in length unit i.e px, em, rem, percentage etc. It also accepts auto which basically decides how the flex items would be distributed based on if a flex-grow is set or based off the content size of the flex item.

See the Pen
flex-basis by Obaseki Nosa (@c0depanda)
on CodePen.

flex-grow

This property gives flex items magical powers such that they can grow to fill up a flex container or take more space than other elements in the container.

It basically specifies what amount of space inside the flex container the item should take up.

Values: <integers> (positive)

See the Pen
flex-grow by Obaseki Nosa (@c0depanda)
on CodePen.

flex-shrink

This is the opposite of flex-grow which basically lets the flex item shrink when necessary. I.e Other items in the flex-container are trying to take more space.

Values: <integers> (positive)

See the Pen
flex-shrink by Obaseki Nosa (@c0depanda)
on CodePen.

Based on the example above, there are 5 Flex items with flex-basis: 200px set on them which makes is 1000px in total.

The Flex container on the other hand has been set to 400px which is smaller than the flex items but because flex-wrap defaults to nowrap we would have all the items trying to fit the Flex container thus distributing theirselves evenly.

Once the flex-shrink values are set on this items they would start to adjust based on the values.

The higher the flex-shrink value is the more it would shrink compared to other Flex items.

flex

This is a shorthand property for flex-grow , flex-shrink and flex-basis but the flex-shrink and flex-basis are optional, i.e you can just set only the flex-grow and the rest will be set to their defaults.

By default the values are set to flex: 0 1 auto i.e flex-grow: 0 , flex-shrink: 1 and flex-basis: auto.

Found this article helpful? Don’t forget to clap and share 🙂

---