Containers are the most important part of Flex. Child elements inside containers will begin to follow the new logic we discussed in the last lesson.
Display
In order to create a container, we use the display property with the flex value. The container itself will behave like a block element, occupying the entire available width. Consequently, other elements will be displayed above or below it, depending on their position in the document flow.
Another possible value for the display property is inline-flex. Inside such a container, everything will be exactly the same as with flex, but the container itself will behave like a string element, taking up exactly as much space as it needs. Other elements in the flow will be able to streamline it as needed and as space permits.
Flex Direction
So, what can we do with the container? One common task using flex is to reposition elements from the x-axis to the y-axis. This is a very common situation when creating mobile versions of websites. Suppose there's a flex-container with three child elements, which are normally mapped to a single line.
Using the flex-direction rule, we can change the main axis used for displaying elements. The flex-direction rule takes on one of several values:
- column. The value sets the y-axis as the main axis. This changes not only the direction but also the rules of element alignment, something we'll study in future lessons. The x-axis begins to act as the cross axis. The behavior, in this case, is as though the coordinate system has been rotated 90 degrees
- column-reverse. This value also sets the y-axis as the main axis, but sort of flips it. Elements in the flow will start being displayed from the bottom
row. Default display. The x-axis is the main axis
row-reverse. The elements line up on the x-axis, but from the end of the axis. The elements also change their order
Do it yourself
Using CodePen, create a flex container with another flex container inside. Set them to different flex-direction values to see how the elements inside these containers will be displayed in the browser.
Docs
- flex-direction
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
