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;
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.
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
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
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
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
This defines which direction the browser should stack the Flex items i.e vertically or horizontally.
Values: row | row-reverse | column | column-reverse
This is a shorthand for
flex-wrap so instead of writing the below;
you can just do this;
flex-flow: column wrap;
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.
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)
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
Values: auto | flex-start | flex-end | center | baseline | stretch
This property sets the initial size of the selected flex item. It’s very similar to the way
width property works.
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.
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)
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)
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.
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.
This is a shorthand property for
flex-basis but the
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
Found this article helpful? Don’t forget to clap and share :)
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.
Try it for free.