Fun with Flexbox
One of the most common tools used in CSS is Flexbox.
Flexbox is a tool to help align and space content efficiently within a container.
The flexbox can even resize items in height and/or width to fill the available space as programmed.
What I’ve created here is a container with three items inside (the red border is just for visibility), and we’ll cover some positioning basics along the way:
First, we declare in the container (.app ) that we want it to be a flexbox with display: flex;
Immediately, you’ll notice in the browser that this shifts each item to be on the x-axis rather than the y-axis. This is the flexbox moving each item to the container’s primary axis:
But we also have Flex Direction
This property tells us what direction we’ll be positioning our elements in.
The initial two options are flex-direction: row and flex-direction: column.
Row positions the elements from left to right as is already in the browser, but column positions from top to bottom.
If you’re making a Card, you can use this property on the card container to align the image on the top half of the card, and the content and/or buttons below.
There is also row-reverse and column-reverse .
And you guessed it… It does the opposite, positioning the elements either from right to left, or bottom to top.
It’s important to notice that it doesn’t just flip the order, but also flips the starting position on the page.
Then we move on to Flex-Wrap
By putting items in a flexbox, you’re positioning them all in one line.
But what if you have a long list of items or images?
Now we have 9 items here:
I gave them some padding as well for readability.
If I shrink the browser though, the items start to move off screen!
If you still want all items to display, then the solution for this is Flex-wrap , which fixes this by “wrapping” elements from one line to the next, and we have a wrap-reverse tool at our disposal as well.
Another common property of flexbox is Justify-Content
Justify-content positions items along the primary axis (x-axis in flex-direction: row, y-axis in flex-direction: column ).
Your options here include flex-start , flex-end , space-around , space-between , space-evenly , and center
To illustrate this I’ll remove a few div items from my App.js file and give them some unique classnames for providing individual background colors.
Getting any Navbar ideas from this?
Experiment with all options in your own IDE!
Next we have align-items - a property of flexbox that positions items on the opposite axis.
In the row direction this aligns on the y-axis, and in the column direction this flips, similar to how justify-content always positions on the primary axis, which becomes vertical in flex-direction: column .
Some visuals will help :)
Let’s say our box now has a fixed height of 600px , and each item a height of 100px so that we can see these items move.
Align-items: center now moves everything to the middle of the flexbox:
Align-items: end moves each element to the bottom of the flexbox:
Other properties of align-items include stretch (to completely fill the container), baseline (this would be noticeable w/ items of varying sizes), and center (which I guarantee you’ve got at this point).
GAP! (not the clothing brand)
Simply put, this is how you create space (or additional space) between elements.
Your options here are gap, row-gap, and column-gap.
Something unique about gap is that it only effects the space between items, but not the space on the outer edges.
Next I’ll remove the fixed height on our container and left each item at 100px.
I’m also adding back in more items and bringing back flex-wrap !
One cool thing you’ll see with flexbox is that even without declaring a height to the flexbox itself, it automatically adjusts its size to fit the items inside.
So with a gap of 10px , we get our spacing between each item:
But if you want to give spacing specifically between items vertically (or horizontally), you can use the row-gap or column-gap properties:
