![Flexbox Containers I - Creating a Flex Container & Changing the Main Axis Direction [2019]](https://i.ytimg.com/vi/5-bb1nBJUfk/maxresdefault.jpg "Flexbox Containers I - Creating a Flex Container & Changing the Main Axis Direction [2019]")
Flexbox Containers I - Creating a Flex Container & Changing the Main Axis Direction [2019] In this video, we’re going to look at creating a flex container and changing the main axis direction.
If you look at the output you can see we have two containers that contain four elements which numbered one to four, and if you look at the markup, we can see two parent containers with children inside of it numbered one to four. When we convert these two elements to flexbox containers, the first flexbox container gonna change the display property to flex, and what we’re going to get is basically an element that still goes the full width of the screen. However, the items inside of it are flexing from left to right and only are as big as the content and the padding that's inside of it. As you can see the numbers go from one to four starting from the very left-hand side and spanning as far as it is to go to fit all four items but the container is still full of acting like a block-level element. So that's basically a block level. The second flexbox container I used the display property to inline-flex and the items still behave the same way, however, we do not see the rest of the flexbox container spanning all the way and they are only going as wide as the content that is inside of it.
Now in terms of changing the direction of the main axis, we have four options. One is row which is from left to right, so the main axis starts from the left and it flows to the right. The items will flow from left to right. Then we have row-reverse where all items start from the right and they flow from right to left. So the direction of the main axis is from right to left. We have a column where the items flow from top to bottom. So the main axis points in the direction of top to bottom and then column-reverse which is the reverse of that where the items start from the bottom and flow towards the top. So the direction of the main axis is flowing from the bottom to the top.
0 Yorumlar