Preamble
Previously, when we wanted to layout in css, we used to use the float attribute, but the float had a limitation that was the height collapse, and we needed one more step to solve this problem by using the clear: both property. defined in class .clearfix. To improve the above disadvantages, Css3 has more Flexbox properties to help link page layout more active. In this article I will go into the properties of Flexbox so that you can catch it so let’s get started
Prepare
To use the flex box property you must first have an outer div tag. Here I have a div with class container container and sub div tags inside it as follows
1 2 3 4 5 6 7 | <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"container"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"item item-a"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"item item-b"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"item item-c"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> |
and a little initial css to determine their size, color
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token operator"><</span> style type <span class="token operator">=</span> <span class="token double-quoted-string string">"text/css"</span> <span class="token operator">></span> <span class="token punctuation">.</span> container <span class="token punctuation">{</span> width <span class="token punctuation">:</span> <span class="token number">500</span> px <span class="token punctuation">;</span> height <span class="token punctuation">:</span> <span class="token number">250</span> px <span class="token punctuation">;</span> border <span class="token punctuation">:</span> <span class="token number">1</span> px solid <span class="token punctuation">;</span> margin <span class="token operator">-</span> left <span class="token punctuation">:</span> <span class="token number">400</span> px <span class="token punctuation">;</span> margin <span class="token operator">-</span> top <span class="token punctuation">:</span> <span class="token number">150</span> px <span class="token punctuation">;</span> background <span class="token operator">-</span> color <span class="token punctuation">:</span> <span class="token shell-comment comment">#0b7cde;</span> line <span class="token operator">-</span> height <span class="token punctuation">:</span> <span class="token number">60</span> px <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">.</span> item <span class="token punctuation">{</span> width <span class="token punctuation">:</span> <span class="token number">60</span> px <span class="token punctuation">;</span> height <span class="token punctuation">:</span> <span class="token number">60</span> px <span class="token punctuation">;</span> background <span class="token operator">-</span> color <span class="token punctuation">:</span> antiquewhite <span class="token punctuation">;</span> margin <span class="token punctuation">:</span> <span class="token number">10</span> px <span class="token punctuation">;</span> text <span class="token operator">-</span> align <span class="token punctuation">:</span> center <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> style <span class="token operator">></span> |
So I’m ready, I open up my browser to see how the elements are displaying, and here’s the result:
Next I will introduce the properties of Flexbox
Properties
First we will add the display: flex;
In the container
class as you can see the items have been arranged in the same row horizontally
1 flex-direction:
The flex-direction
attribute specifies the flex-direction
the arrangement of the item in the container
- row: items are arranged horizontally from left to right, and it is the default value of
flex-direction
- row-reverse: same as
row
but the order of items is reversed from right to left
- column: items are arranged vertically in order from top to bottom
- column-reverse: same as
column
but the order of items is reversed from bottom to top
2 flex-wrap:
The flex-wrap
attribute determines whether items are pressed into a single line or can be dropped into multiple lines when the width of the items is greater than the width of the container.
- nowrap: specifies that the items must be on the same line, this can cause the items to overflow from the container, the default value of
flex-wrap
isnowrap
Here I will add some items to give the total width of the items greater than container width
- wrap: Items are separated into two lines if the total width of the items is greater than the width of the container
- wrap-reverse: similar to wrap but it reverses the value of rows or columns according to the value of
flex-direction
. Here I am lm example withflex-direction
value isrow
you can practice the same withcolumn
value
3 justify-content:
The justify-content
attribute is used to determine how to arrange an item inside a container when the total width of the items is less than the width of the container.
- flex-start: This value aligns the items to the top of the container, and it is the default value of
justify-content
- center: This value will center the items
- flex-end: This value aligns the items towards the end of the container
- space-around: This value will divide the distance between the items equally and double the distance of the item to the beginning and end of the container.
- space-between: This value will divide the space evenly between items and there is no space between the item to the beginning and end of the container.
- space-evenly: This value evenly divides the distance between items and the distance between the items to the beginning and end of the container
Note: in the examples above I am going to flex-direction: row;
, and in the column
, try it out
4 align-items:
This attribute is similar but justify-content
but n will align items in tens perpendicular to the dozen of justufy-content
. I will temporarily call it chục vuông góc
, and the axis in flex-direction
I will call it trục chính
- stretch: If the item is not set to height, the item will be stretched by the length of the container, it is also the default value of
align-items
- center: align items to the center of the
trục vuông góc
- flex-start: align items to the beginning of
trục vuông góc
- flex-end: align items to the end of the
trục vuông góc
Note : here, for example, in this align-items
section, I am leaving the value of flex-direction
= row
so trục vuông góc
will be the vertical axis, you also do the same with flex-direction
= column
to see the results. Please
5 align-content:
This property determines the position of the child items relative to its main axis in the container if and only if the container has the flex-wrap: wrap
- stretch: when the items are not considered height and the parent container has the
flex-wrap: wrap
, the height of the items will be extended by the height of the container. Andstretch
is also the default value foralign-content
- center: the items will be centered in the parent container along the main axis
- flex-start: items will be aligned to the top of the container along the spindle
- flex-end: the items will be aligned to the bottom of the container along the main axis
- space-around: This value will divide the distance between the rows containing the item and divide the distance between the top and bottom of the container twice.
- space-between: This value will divide the distance between the rows containing the items and there is no space between the top and bottom to the beginning and end of the container.
- space-evenly: This value will evenly divide the distance between the rows containing the items and the distance between the top and bottom to the beginning and end of the container.
note : here for this align-content
, I am leaving the value of flex-direction
= row
and for flex-direction
= column
, please try it out.
Conclude
So I and you have to learn the properties of Flexbox. During the writing process, there are many shortcomings, you can see any places that are not right or do not understand, you can comment down below to let me know, thank you. have read.