CSS Flex Fundamentals
Flex is a CSS setting that is pretty straightforward but can cause some head-scratching slip-ups from time to time. Here are some of the main fundamentals of the Display: Flex CSS Property that may hopefully help you out.
What does it do?
Simply put, flex allows you to line up a list of elements nested inside of it. You can choose to line up these nested elements horizontally or vertically. One of the things that always helped me when I first started with flex is that it helps line elements up.
Settings for Flex Containers
There are settings that you can add on both the flex container and its children. Here are some of the flex container settings and how they work.
Display: Flex
This setting essentially sets up flex on the parent container.
Justify Content
This setting controls the alignment of ALL the children elements on the horizontal axis (left & right).
Start (default setting)
This will line up all of the children elements at the beginning (start) of the flex container.
Center
This will line up all of the children elements at the center of the flex container.
End
This will line up all of the children elements at the end of the flex container.
Space-Between
This will space out all of the children elements but will leave no spacing on the end elements. In the example below, the 1st and 4th boxes are flush on the end of the flex container’s padding instead of having spacing on their ends.
Space-Evenly
This will space out all of the elements evenly on both sides of each element. Both sides are important to note here as you will see there is a difference in the next justify setting we talk about. In the image below, you can see that the spacing between each element on each side is even 160px throughout.
Space-Around
The easiest way that I’ve always looked at it is that there is a fixed spacing around each element. The main difference between space-around & space-evenly is that space-around will not have an even amount of space on the end elements' furthest ends. In the image below you will see that the 1st and 4th elements' furthest ends have a lower spacing from the end of the container bounds than the spacing between each element. So in this type of justifying, the end elements will not be spaced the same as the inside elements. For me, it is always best to just know that it will add space between elements but will not space all elements perfectly even as space-evenly would.
Align Items
This setting controls the alignment of ALL the children elements on the vertical axis (up & down).
Start (default setting)
This will line up all of the children elements at the beginning (start) of the cross-axis in the flex container. In the example below in which our flex items are lined up in a row, the items will line up at the start of the vertical axis.
Center
This will line up all of the children elements at the center of the cross-axis in the flex container. In the example below in which our flex items are lined up in a row, the items will line up at the center of the vertical axis.
End
This will line up all of the children elements at the end of the cross-axis in the flex container. In the example below in which our flex items are lined up in a row, the items will line up at the end of the vertical axis.
Baseline
This will line up all of the children elements based on the baseline of any text contained within them. Please see the example below for an illustration of this.
Flex Direction
This setting controls the direction (and general order) that the children will be lined up. The options for this consist of row, row-reverse, column, and column-reverse.
Row (default setting)
This lines the child elements in a row.
Column
This lines the child elements vertically.
Row-Reverse
This is the same as row in the sense that all of the items are lined up horizontally. The difference is that the flex children are organized in reverse order.
Column-Reverse
This is the same as column in the sense that all of the items are lined up vertically. The difference is that the flex children are organized in reverse order.
Flex Wrap
This setting controls whether or not the flex children will wrap to the next line when there isn’t enough room for them.
No-Wrap (default setting)
This will prevent the flex children from wrapping when the flex container shrinks in size. Unless you have the children widths or flex-basis set to a fixed width, the children elements will continue to shrink as the flex container gets smaller.
Wrap
This will cause the children to “wrap” over to the next line as the container shrinks in size.
Wrap-Reverse
This will do the same as a wrap but will wrap them above the current list instead of the conventional below direction. See the example below.
Column-Gap & Row-Gap
This setting controls the spacing or “gap” between each flex item. This can be a good substitute to specify an exact unit (px, em, rem) that you would like each child element to space out by as opposed to adding margins to each child element.
Column-Gap
This setting controls the spacing between each “column”. This type of gap takes place when flex-direction is set to row. Let’s say flex-wrap was set to wrap and the flex child elements ran out of room so they started to wrap and create a new row. Even in this situation, the next rows will also have spacing between each other for the value that you set the column-gap to. Also, in the image below, notice that this column-gap spacing only applies to the spacing between each element. This spacing does NOT apply the distance between the outermost elements and the bounds of the flex container.
Row-Gap
This setting controls the spacing between each “row”. This type of gap would be important in a couple of situations:
- If you have the flex-direction set to column. This would then cause the children elements to be stacked, therefore now lining them up in rows. That spacing between these rows would be considered the “row gap” which you can then specify an exact unit that you would like these rows to be spaced.
- When you have the flex-direction set to row but set the flex-wrap to wrap. Once the width of the flex-container starts to shrink to the point that the children flex elements are no longer able to fit, they will then wrap to the next row. The row-gap set will also apply to this, as these are now rows that have been created.
Settings for Flex Children
So we just got done covering the flex container settings, here are some of the flex children settings and how they work.
Order
This allows you to control a flex child elements order appearance in the flex container. This is specified by a number value. The lower the value, the earlier it will be in the order. The higher the value, the later it will be in the order. If two or more children elements have the same order value, their order between each other will then be determined by how they are originally ordered in the DOM or HTML Markup.
Flex Grow
Flex grow controls the flex child element's ability to grow when there is any extra space available. You can specify how much that specific child element will grow with a numerical value. This will then compare to the rest of the child elements, flex-grow value. The higher the value, the more that specific element will be willing to grow. The lower the value, the less it will be willing to grow. If there is no flex-grow value specified, the default value for it will be 0.
Flex Shrink
Flex shrink controls a specific flex child elements ability to shrink compared to the other flex children. This is basically the exact opposite of flex-grow except for the default value for flex-shrink is 1, whereas the default value for flex-grow is 0. In theory, the higher the flex-shrink value, the more it will shrink. Reference the examples below.
Flex Basis
Flex basis controls the flex child’s default width before any extra space is taken into account. I kind of think of it as a width for flex children. The width and height values do take precedence over flex-basis though. So if your flex-direction is set to “row” for example, and you have a width set, that width will override any flex-basis value that you set for that element.
Align Self
Align self allows you to align a specific flex-child element. This allows you to align a child element differently from the rest of the elements.
Hopefully, you liked this brief summary of CSS Flex and that it was helpful to you 👍. If you are looking for a couple of further CSS Flex resources, I’ve compiled a few of them on our website.
