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

I face a lot of problems when centering things in CSS. So I finally decided to learn CSS Flexbox. I started with Wes Bos's course What The Flexbox. It's a great free course, check it out if you want to learn flexbox.

\n

Introduction

\n

The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.

\n

The container or parent element is called \"flex container\" while the children are called \"flex items\". In Flexbox there are two axes - Main axis and Cross axis. The flex items will be aligned along these axes.

\n
\n\t\n \n \"Flexbox\n \n\t
Image Credit: CSS-Tricks
\n
\n

flex-direction

\n

The default direction of the main-axis is from left to right while the direction of cross-axis is from top to bottom. However, this can be changed by Flexbox property flex-direction. To understand how flex-direction changes these axes we need to see some code example.

\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 class=\"box box7\">7</div>\n    <div class=\"box box8\">8</div>\n  </div>
\n

I have taken a container div (flex container) and there are 8 divs (flex items) inside it.

\n
.container {\n  display: flex;\n  border: 10px solid #000000;\n  flex-direction: row;\n}
\n

For Flexbox to work we need to set the display property of container to flex. The default flex-direction is row and it would align the flex items as below:

\n
\n\t\n \n \"position\n \n\t
flex-direction: row
\n
\n

There are mainly four values for flex-direction - row, row-reverse, column and column-reverse.

\n

flex-direction: row-reverse changes the direction of main-axis from left to right.

\n
\n\t\n \n \"position\n \n\t
flex-direction: row-reverse
\n
\n

flex-direction: column changes the direction of main-axis from top to bottom.

\n
\n\t\n \n \"position\n \n\t
flex-direction: column
\n
\n

flex-direction: column-reverse changes the direction of main-axis from bottom to top.

\n
\n\t\n \n \"position\n \n\t
flex-direction: column-reverse
\n
\n

This is it for today's post. I will continue to share about Flexbox in my future posts.

","timeToRead":2,"frontmatter":{"title":"Understanding flex-direction in Flexbox","date":"2017-10-15T00:00:00.000Z","tags":["CSS"]}}},"pageContext":{"slug":"flexbox-start"}},"staticQueryHashes":["3649515864","63159454"]}