Scenario
We have a main element flexbox container with three items in it.
<main>
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</main>And we want to see how these can be styled using Flexbox.
Approach
We will be using the Flexbox tooling that comes with Chrome Developer Tools so we have created a Stackblitz Demo with scaffolding.
Open it and you will find an index.html document with both the CSS and html.
The main flexbox container has been given the following base styling.
main {
display: flex;
padding: 1rem;
background-color: gray;
height: 400px;
}We’ve also created base styling for each div flex item contained within the main element.
div {
margin: 1rem;
min-height: 100px;
width: 100px;
padding: 1rem;
}Each div item has been given a unique color and an initial width and height. For example the last item .item3 has this style.
.item3 {
background-color: aqua;
min-height: 300px;
}Open the page in a new Window by clicking Open in New Window on the Stackblitz demo.
Then open the developer tooling and dock it to the left side of the window.
To do this click on the three little vertical dots menu selector and the dock options will appear.
Then click on the main element. Notice that the CSS for it has a little flexbox icon on the right side that allows us to open Chromes Developer Flexbox Tooling. Open that like this.
We now have access to the flex container properties.
By clicking on each option we apply them to the styling of the main element flexbox container.
If we were to explicitly set these options using the defaults on the main element they would be set as shown on the chrome developer tooling flexbox dialog or as follows (Look in the computed tab as well to verify these default settings).
main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: normal;
justify-content: normal;
align-items: normal;
}Turn off Flexbox Display
If we turn off flexbox by clicking on the checkbox next to the display property we see that the display property value returns to the default which is block and then items render at their designated vertical document flow order .
Notice that the main element container retains the height of 400px, thus the items overflow the container. If we turn off the height property the container stretches to fit the items.
Experiments
Experimentation with the flexbox properties can now begin using the flexbox dialog.
align-items
When the flex-direction is set to row or row-reverse the align-items property aligns the items along the cross-axis or the vertical axis (top to bottom).
If the flex-direction is set to column or column-reverse then the items are aligned along the main axis .
The default value for align-items is normal or stretch.
Click on the stretch option in the developer tooling for align-items and the rendering will remain the same.
The stretch value is the reason that we see that all the items are stretched out to fit the size of the container.
If we change the container height to 500px, we see that the flex items now stretch to fill the additional space. If we set the main element height to 200px we see that the flex items with a height greater than this overflow the container.
Set the height back to 400px and try out the other values:
centerflex-startflex-endbaseline
justify-content
When the flex-direction is set to row or row-reverse the justify-content property aligns the items along the main-axis or the horizontal axis (left to right).
If the flex-direction is set to column or column-reverse then the items are aligned along the cross axis .
The default value for justify-content is flex-start . Try out the other values.
centerflex-endspace-betweenspace-aroundspace-evenly
align-content
The default value for align-content is normal or stretch .
If we try any of the property values for align-content while the flex-direction is set to row nothing changes.
The reason for this is that the align-content property sets the distribution of space between and around content items along a flexbox's cross-axis.
So in order to see the effect we need the items to wrap.
We setup a different Stackblitz such that our items are wrapped and given an initial height thats the same for each item. We set flex-wrap to wrap. The height of the container is 100vh giving the items a chance to wrap and the width is 400px, causing the items to wrap.
This is the container CSS declaration.
main {display: flex;flex-wrap: wrap;padding: 1rem;background-color: gray;height: 100vh;width: 400px;}
And we have fixed the height and width of each div element.
div {
margin: 1rem;
height: 100px;
padding: 1rem;
width: 100px;
}.item1 {
background-color: red;
}
.item2 {
background-color: yellow;
}
.item3 {
background-color: aqua;
}
Try the different values for align-content and watch how the items are distributed along the cross-axis .
flex-basis, flex-grow, flex-shrink
Notice that in the first Stacblitz demo the flexbox if we shrink the window the items shrink also even thought they have been given a fixed 100px width.
That the “Flexible” part of flexbox.
We can also cause them to grow and shrink proportionately by using the values flex-basis, flex-grow, and flex-shrink. These must be applied to each flex item individually. So for example if we set flex-grow to 1 on the first div element it will expand that element to fill the remaining space.
.item1 {
background-color: red;
flex-grow: 1;
}If you would like more insight into these WebDevSimplified has an excellent Youtube covering these.
Summary
One final note is that for the most part we looked at the distribution of the items using flex-direction: row .
If we change it to flex-direction: column then the main axis runs from top to bottom and the cross axis runs from left to right.
And so for example justify-content when flex-direction is set to column will distribute the items along the main-asix still, however the main-axis now runs vertically from top to bottom.
