{"componentChunkName":"component---src-templates-post-js","path":"/blog/align-items","result":{"data":{"markdownRemark":{"html":"

In my last post, I discussed justify-content. Today, I will talk about the difference between align-items and align-content.

\n

Below, I have some divs (flex-items) inside a container div (flex-container) in an HTML document. The CSS style is also given below.

\n
<div class=\"container\">\n    <div class=\"box box1\">1</div>\n    <div class=\"box box2\">2</div>\n    <div class=\"box box3\">3</div>\n    <div class=\"box box4\">4</div>\n    <div class=\"box box5\">5</div>\n    <div class=\"box box6\">6</div>\n</div>
\n
.box {\n  color: white;\n  font-size: 100px;\n  text-align: center;\n  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);\n  padding: 10px;\n}\n\n/* Colours for each box */\n.box1 {\n  background: #1abc9c;\n}\n.box2 {\n  background: #3498db;\n}\n.box3 {\n  background: #9b59b6;\n}\n.box4 {\n  background: #34495e;\n}\n.box5 {\n  background: #f1c40f;\n}\n.box6 {\n  background: #e67e22;\n}\n\n.container {\n  display: flex;\n  border: 10px solid #000000;\n}
\n
\n \n \n \"justify\n \n
Output for starter code
\n
\n

align-items

\n

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.

\n
.container {\n  display: flex;\n  border: 10px solid #000000;\n  align-items: center;\n}
\n
\n \n \n \"align\n \n
align-items: center
\n
\n

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.

\n
.container {\n  display: flex;\n  border: 10px solid #000000;\n  align-items: center;\n  height: 100vh;\n}
\n
\n \n \n \"align\n \n
They are vertically centered, aren't they?
\n
\n

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.

\n
\n \n \n \"align\n \n
align-items: flex-start
\n
\n
\n \n \n \"align\n \n
align-items: flex-end
\n
\n

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:

\n
\n \n \n \"align\n \n
align-items: stretch
\n
\n

To explain baseline, I am changing height and padding of box 3.

\n
.box3 {\n  padding-top: 50px;\n  height: 300px;\n}
\n

In baseline, flex-items are algined as their baselines align as seen below:

\n
\n \n \n \"align\n \n
align-items: baseline
\n
\n

align-content

\n

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.

\n
.container {\n  display: flex;\n  border: 10px solid #000000;\n  height: 100vh;\n  flex-wrap: wrap;\n}\n\n.box {\n  width: 33.333%;\n}
\n

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.

\n
\n \n
align-content-stretch
\n
\n

The other possible values of align-content are flex-start, flex-end, center, space-between, and space-around. The output for each of these is given below:

\n
\n \n \n \"align\n \n
align-content-flex-start
\n
\n
\n \n \n \"align\n \n
align-content-flex-end
\n
\n
\n \n \n \"align\n \n
align-content-center
\n
\n
\n \n \n \"align\n \n
align-content-space-between
\n
\n
\n \n \n \"align\n \n
align-content-space-around
\n
\n

This is all about align-items and align-content in Flexbox. Thanks for reading!

","timeToRead":3,"frontmatter":{"title":"Difference between align-items and align-content in Flexbox","date":"2017-10-26T00:00:00.000Z","tags":["CSS"]}}},"pageContext":{"slug":"align-items"}},"staticQueryHashes":["3649515864","63159454"]}