Work with Flexbox in gifs
Flexbox and begs for it to create visual cheat sheets on it. Today we offer you a translation of Scott Dom’s article How Flexbox Works in Large, Bright Animated Gifs, a kind of visual aid.
Flexbox promises to save us from the drawbacks of standard CSS (such as vertical alignment).
Admittedly, the Flexbox really does the job. However, the development of this new model may cause some difficulties.
Let's try to demonstrate how Flexbox works, allowing you to create more advanced page layouts.
The basic principle of Flexbox is flexible and intuitive page layouts. This is achieved due to the fact that the containers themselves evenly distribute their child elements - including their size and the space between them.
')
The idea, in principle, is not bad. But let's see how this is implemented in practice. In this article we will look at 5 basic properties of Flexbox. We will describe what they are for, how you can use them, and what results they eventually bring.
Here is our webpage as an example:
You have four different colored blocks of various sizes in a gray container. At this point, display: block is defined by default for each block. Each square thus occupies the entire width of its line.
To get started with Flexbox, you need to turn your container into a flex-container. This is done as follows:
At first glance, the changes are minor - your blocks are now displayed in inline form, that's all. In the meantime, you made a big step. You have created a so-called flex-context for your blocks.
Now you can place them in this context - it's much easier than with traditional CSS.
The flexbox container has two axes: the main axis and the perpendicular axis, which by default look like this:
By default, flex elements line up along the main axis, from left to right. Therefore, your default squares will be placed in a horizontal row as soon as you apply display: flex. The flex-direction, however, allows the main axis to rotate.
It should be emphasized: flex-direction: column does not have squares on the perpendicular axis instead of the main axis. This property changes the direction of the most important axis from horizontal to vertical.
Flex-direction has other values: row-reverse and column-reverse.
Justify Content sets the alignment of elements along the main axis.
Here the distinction between the main and perpendicular axes should be considered in more detail. First back to flex-direction: row.
Justify Content has five meanings:
Space-around and space-between are the least intuitive. Space between aligns the elements so that they are located at the same distance relative to each other, but not relative to the container.
Space-around sets the same padding around the element on all sides. This means that the space between the extreme squares and the container is half as large as the space between the two squares (all indents are of the same size and do not overlap, respectively, the gap between the squares is double).
And finally: remember that justify-content aligns the elements along the main axis, and the flex-direction changes the position of the main axis itself. It will be important when you go to ...
If you have mastered justify-content, align-items will not cause you any difficulty.
While justify-content is applied to the main axis, align-items set the alignment of elements along the perpendicular axis.
Set the flex-direction to the initial value of the row so that the axes look like this.
Then move on to the align-items commands.
The first three act in the same way as for justify-content, so everything is simple with them.
The following two are somewhat different.
For a given stretch value, the elements occupy the entire free space along the perpendicular axis. If a baseline is specified, the bases of the paragraph tags are aligned.
(For align-items, the following is important: when stretch, you must set the height of the squares automatically, otherwise it will override the width.)
As for the baseline, keep in mind: if you remove paragraph tags, the bases of the squares will align, as in the example:
To better demonstrate the functioning of the main and perpendicular axes, let's combine justify-content and align-items and see how the center value affects each of the flex-direction commands:
When row squares are aligned along the horizontal main axis. At column, they are located along the vertical main axis.
Even if the squares are centered both vertically and horizontally in both cases, the two commands are not interchangeable!
Align Self allows you to manually control the alignment of one particular element.
This property overrides the align-items for the selected square. All properties are the same, but auto is set by default, in which the values are similar to the container's align-items.
Let's see how it will look. You apply align-self to two squares, and for the rest you apply align-items: center and flex-direction: row.
Although we only superficially touched on working with Flexbox, the commands discussed will allow you to perform most basic alignments and vertical alignment of elements.
Thanks for attention!
Flexbox promises to save us from the drawbacks of standard CSS (such as vertical alignment).
Admittedly, the Flexbox really does the job. However, the development of this new model may cause some difficulties.
Let's try to demonstrate how Flexbox works, allowing you to create more advanced page layouts.
The basic principle of Flexbox is flexible and intuitive page layouts. This is achieved due to the fact that the containers themselves evenly distribute their child elements - including their size and the space between them.
')
The idea, in principle, is not bad. But let's see how this is implemented in practice. In this article we will look at 5 basic properties of Flexbox. We will describe what they are for, how you can use them, and what results they eventually bring.
Property No. 1: Display: Flex
Here is our webpage as an example:
You have four different colored blocks of various sizes in a gray container. At this point, display: block is defined by default for each block. Each square thus occupies the entire width of its line.
To get started with Flexbox, you need to turn your container into a flex-container. This is done as follows:
#container { display: flex; } At first glance, the changes are minor - your blocks are now displayed in inline form, that's all. In the meantime, you made a big step. You have created a so-called flex-context for your blocks.
Now you can place them in this context - it's much easier than with traditional CSS.
Property # 2: Flex Direction
The flexbox container has two axes: the main axis and the perpendicular axis, which by default look like this:
By default, flex elements line up along the main axis, from left to right. Therefore, your default squares will be placed in a horizontal row as soon as you apply display: flex. The flex-direction, however, allows the main axis to rotate.
#container { display: flex; flex-direction: column; }
It should be emphasized: flex-direction: column does not have squares on the perpendicular axis instead of the main axis. This property changes the direction of the most important axis from horizontal to vertical.
Flex-direction has other values: row-reverse and column-reverse.
Property # 3: Justify Content
Justify Content sets the alignment of elements along the main axis.
Here the distinction between the main and perpendicular axes should be considered in more detail. First back to flex-direction: row.
#container { display: flex; flex-direction: row; justify-content: flex-start; }
Justify Content has five meanings:
- Flex-start
- Flex-end
- Center
- Space between
- Space-around
Space-around and space-between are the least intuitive. Space between aligns the elements so that they are located at the same distance relative to each other, but not relative to the container.
Space-around sets the same padding around the element on all sides. This means that the space between the extreme squares and the container is half as large as the space between the two squares (all indents are of the same size and do not overlap, respectively, the gap between the squares is double).
And finally: remember that justify-content aligns the elements along the main axis, and the flex-direction changes the position of the main axis itself. It will be important when you go to ...
Property # 4: Align Items
If you have mastered justify-content, align-items will not cause you any difficulty.
While justify-content is applied to the main axis, align-items set the alignment of elements along the perpendicular axis.
Set the flex-direction to the initial value of the row so that the axes look like this.
Then move on to the align-items commands.
- flex-start
- flex-end
- center
- stretch
- baseline
The first three act in the same way as for justify-content, so everything is simple with them.
The following two are somewhat different.
For a given stretch value, the elements occupy the entire free space along the perpendicular axis. If a baseline is specified, the bases of the paragraph tags are aligned.
(For align-items, the following is important: when stretch, you must set the height of the squares automatically, otherwise it will override the width.)
As for the baseline, keep in mind: if you remove paragraph tags, the bases of the squares will align, as in the example:
To better demonstrate the functioning of the main and perpendicular axes, let's combine justify-content and align-items and see how the center value affects each of the flex-direction commands:
When row squares are aligned along the horizontal main axis. At column, they are located along the vertical main axis.
Even if the squares are centered both vertically and horizontally in both cases, the two commands are not interchangeable!
Property # 5: Align Self
Align Self allows you to manually control the alignment of one particular element.
This property overrides the align-items for the selected square. All properties are the same, but auto is set by default, in which the values are similar to the container's align-items.
#container { align-items: flex-start; } .square#one { align-self: center; } // Only this square will be centered.
Let's see how it will look. You apply align-self to two squares, and for the rest you apply align-items: center and flex-direction: row.
Conclusion
Although we only superficially touched on working with Flexbox, the commands discussed will allow you to perform most basic alignments and vertical alignment of elements.
Thanks for attention!
Source: https://habr.com/ru/post/321244/
All Articles