Difference between align-items and align-content in Flexbox
In my last post, I discussed justify-content
. Today, I will talk about the difference between align-items
and align-content
.
Below, I have some divs (flex-items) inside a container div (flex-container) in an HTML document. The CSS style is also given below.
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
</div>
.box {
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
padding: 10px;
}
/* Colours for each box */
.box1 {
background: #1abc9c;
}
.box2 {
background: #3498db;
}
.box3 {
background: #9b59b6;
}
.box4 {
background: #34495e;
}
.box5 {
background: #f1c40f;
}
.box6 {
background: #e67e22;
}
.container {
display: flex;
border: 10px solid #000000;
}
![justify content justify content](/static/1dda52fd3e326f0c964e915ddf1f94cf/af590/justify-content.png)
align-items
align-items
is used to align flex-items along the cross axis in a flex-container. The default direction of cross-axis is from top to bottom. You must be thinking that to center the flex-items vertically we can set align-items
to center
and you are right but there is a catch! Let us find it out by setting align-items
to center
and see the output.
.container {
display: flex;
border: 10px solid #000000;
align-items: center;
}
![align items align items](/static/2dddff2835c4f03a88b725269ba0e553/3d84d/align-items.png)
What is wrong with the output? It should have been vertically centered but it is not. Why? The answer to this question is hidden in the definition of align-items
. It aligns the flex-items along cross-axis but only inside its flex-container. The black border shows us the height of the container, which is same as the height of flex-items. That is why we see no change. Let's change the height of the container and see what happens.
.container {
display: flex;
border: 10px solid #000000;
align-items: center;
height: 100vh;
}
![align items center align items center](/static/a03ca6e69a28a23f5bdec59b686f45ec/af590/align-items-center.png)
Now that align-items: center
is working, let us try other values of align-items. The other possible values of align-items
are flex-start
, flex-end
, stretch
, and baseline
.
![align items flex start align items flex start](/static/8cc6ff9c581dc96c84fd941134d4cc38/e9c9b/align-items-flex-start.png)
![align items flex end align items flex end](/static/2d8adbb230866aeec8fa7b8ed3bddd93/e9c9b/align-items-flex-end.png)
Setting align-items
to stretch
will stretch all the flex-items to take the full height of container. It is also the default value for align-items
. The output can be seen below:
![align items stretch align items stretch](/static/f46e342fb89b8d96cdcf3b3a2a58a820/af590/align-items-stretch.png)
To explain baseline
, I am changing height and padding of box 3.
.box3 {
padding-top: 50px;
height: 300px;
}
In baseline
, flex-items are algined as their baselines align as seen below:
![align items baseline align items baseline](/static/de09f0da1b2195268d5ac165d4f4af38/e9c9b/align-items-baseline.png)
align-content
align-content
is a bit tricky. First of all, it only works for multiline flex-items. So, we will have to wrap the flex-items. align-content
deals with the extra space along cross-axis just like justify-content
does for main-axis. First, let us make the necessary changes in CSS to understand align-content
.
.container {
display: flex;
border: 10px solid #000000;
height: 100vh;
flex-wrap: wrap;
}
.box {
width: 33.333%;
}
The default value of align-content
is stretch
which stretches flex-items to take full space of the flex-container. In the output below, each row is taking 50% of total container height because there are two rows.
![]('/align-content-stretch.png' />
<figcaption>align-content-stretch</figcaption>
</figure>
<p>The other possible values of <code class=)
flex-start
, flex-end
, center
, space-between
, and space-around
. The output for each of these is given below:
![align content flex start align content flex start](/static/1cf82810f1e2c58b8f02888688fa6fca/e9c9b/align-content-flex-start.png)
![align content flex end align content flex end](/static/4e1dc3b2a7878d3d2bc96a424357179b/80d71/align-content-flex-end.png)
![align content center align content center](/static/101901d7963efb7fcce9428a3466912c/e9c9b/align-content-center.png)
![align content space between align content space between](/static/b373e74c9ea74e25c89b934398d5e262/e9c9b/align-content-space-between.png)
![align content space around align content space around](/static/5935e5150f68cfb6313712ab10531772/e9c9b/align-content-space-around.png)
This is all about align-items
and align-content
in Flexbox. Thanks for reading!