CSS: Flexbox fundamentals

Theory: Flex container

pages.courses.lessons.theory_unit.sign_up_block_title

pages.courses.lessons.theory_unit.sign_up_block_description

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.