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

In my last post, I discussed about flexbox-wrap and order. Today, I will be talking about the role of justify-content in Flexbox.

\n

I will be using below code sample to explain justify-content. I have 6 divs (flex-items) inside a container div (flex-container).

\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

The above code produces following output:

\n
\n \n \n \"justify\n \n
Output for starter code
\n
\n

justify-content defines the alignment of flex-items along the main-axis in a flex-container. It also helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

\n

The default value for justify-content is flex-start which aligns the flex-items towards the start of the main axis. If we change the value of justify-content to flex-end then it will align flex-items towards the end of the main axis as seen below:

\n
\n \n \n \"justify\n \n
justify-content: flex-end
\n
\n

Changing flex-items to center will align all the flex-items to the center of the main axis (see, how easy it is to center in Flexbox) as seen below:

\n
\n \n \n \"justify\n \n
justify-content: center
\n
\n

To distribute the extra space among all the flex-items we can set justify-content to space-between. The first item is on the start of the main axis while the last item is on the end of the main axis as seen below:

\n
\n \n \n \"justify\n \n
justify-content: space-between
\n
\n

We can see that first and last flex-items don't have the margin on the left and right side respectively. We can fix this by changing justify-content to space-around.

\n
\n \n \n \"justify\n \n
justify-content: space-around
\n
\n

Still, the first and last flex items have only one unit margin on their respective left and right side while other flex-items have 2 units margin. To fix this we can set justify-content to space-evenly. Now, the spacing between any two items (and the space to the edges) is equal as seen below:

\n
\n \n \n \"justify\n \n
justify-content: space-evenly
\n
\n

This is all about justify-content in Flexbox. I am learning Flexbox from Wes Bos's course What The Flex Box . It is a great free course.

","timeToRead":2,"frontmatter":{"title":"What is justify-content in Flexbox","date":"2017-10-25T00:00:00.000Z","tags":["CSS"]}}},"pageContext":{"slug":"justify-content"}},"staticQueryHashes":["3649515864","63159454"]}