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.

https://medium.com/media/edd01adbf037f51477ed4e68a3f4fd26/href

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

https://medium.com/media/b4398c7e3515668c3424631285fc8bb1/href

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

https://medium.com/media/3aa0103329264485e83d595e36191706/href

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 F lex line.

Values: nowrap | wrap | wrap-reverse

https://medium.com/media/44ed8e66e4579412b07cffef96dc13c3/href

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

https://medium.com/media/4e4275b97d9bee94038471c0d269a93b/href

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

https://medium.com/media/5c637af5f891b346bf645aa1a76170a0/href

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: (positive or Negative)

https://medium.com/media/b89ad7690ac49a38616ea1767c6d7474/href

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

https://medium.com/media/7ba27aa32e98c1383bf3ba7dd4625118/href

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.

https://medium.com/media/eb5b289709639a6afdd4ccc7dc62c9bb/href

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: (positive)

https://medium.com/media/a495a9a8720bdbaf603dc52cbfd832aa/href

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: (positive)

https://medium.com/media/3b64e29fb7dc700a9672b5dd6b785910/href

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

Plug: LogRocket, a DVR for web apps

LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.

Try it for free.