CSS flexbox is a one-dimensional (aka 1D) layout pattern, one of the patterns that makes it easy to design a flexible and effective layout. Divide space between items and control aligning them in the flex layout container. With flexbox, we can easily arrange items from left to right, from top to bottom, and control the distance and order of items in the container.
How does it work?
Before going into more depth on Flexbox, we need to understand the structure of Flexbox as:
In flexbox, there are mainly two main components: the parent container (flex container) and the child elements inside (flex items).
In addition, we also need to consider some of the following properties:
- main start, main end, cross start, cross end: The beginning of the container according to the main axis is called main start, the end of the container according to the main axis is called the main end, with cross start and cross similar but based on cross axis.
- main axis: This axis is the direction of the display items, by default, it will
chạy từ trái qua phải.
- cross axis: This axis is perpendicular to the
main axis
,chạy từ trên xuống dưới.
- main size: The size of each item based on the main axis.
- cross size: The size of each item based on the cross axis.
Properties of flex container
Here are some attributes that can be used for flex containers:
- display
- flex-direction
- flex-wrap
- flex-flow
- justified-content
- align-items
- align-content
Do not use flexbox
1 2 3 4 5 6 | <div class= <span class="token string">"box"</span> > <div class= <span class="token string">"box-item"</span> >1</div> <div class= <span class="token string">"box-item"</span> >2</div> <div class= <span class="token string">"box-item"</span> >3</div> </div> |
Use display to apply flexbox
We need to use the display
property. This is how we define a flex container, which is also mandatory if you work with flexbox.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> style</span> <span class="token punctuation">></span></span> <span class="token style"><span class="token language-css"> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
flex-direction
flex-direction
used to specify the display direction of items, changing the flex display direction can also allow us to change the position of flex items.
flex-direction: row
flex-direction: row
is the default value when using flexbox, does not make any changes, only places items từ trái qua phải
in the main axis.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> style</span> <span class="token punctuation">></span></span> <span class="token style"><span class="token language-css"> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> <span class="token property">flex-direction</span> <span class="token punctuation">:</span> row <span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
flex-direction: row-reverse
As with the name, flex-direction: row-reverse
opposed to row
, the items will be placed từ phải qua trái
.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> style</span> <span class="token punctuation">></span></span> <span class="token style"><span class="token language-css"> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> <span class="token property">flex-direction</span> <span class="token punctuation">:</span> row-reverse <span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
flex-direction: column
When we consider flex-direction: column
, the spindle will now go from top to bottom so the items will now be stacked.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> style</span> <span class="token punctuation">></span></span> <span class="token style"><span class="token language-css"> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> <span class="token property">flex-direction</span> <span class="token punctuation">:</span> column <span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
flex-direction: column-reverse
Then the items will be stacked on top of each other but in the opposite direction. Notice that the example above (1) will be at the top, but when using column-reverse
(1) will be at the bottom.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> style</span> <span class="token punctuation">></span></span> <span class="token style"><span class="token language-css"> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> <span class="token property">flex-direction</span> <span class="token punctuation">:</span> column-reverse <span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
flex-wrap
flex-wrap
used to control the wrapping of items within the container. If we reduce the width of the browser, we may not see several items on the same line. The flex-wrap
attribute can solve that problem:
- nowrap (default): Nothing has changed
- wrap: items will be fully wrapped in containers
- wrap-reverse
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> style</span> <span class="token punctuation">></span></span> <span class="token style"><span class="token language-css"> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> <span class="token property">flex-wrap</span> <span class="token punctuation">:</span> nowrap <span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 4 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 5 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 6 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 7 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 8 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 9 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
nowrap
wrap
wrap-reverse
flex-flow
flex-flow
is an abbreviation for flex-direction
and flex-wrap
. In flex-flow
the first value is flex-direction
and the second is flex-wrap
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> style</span> <span class="token punctuation">></span></span> <span class="token style"><span class="token language-css"> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> <span class="token property">flex-flow</span> <span class="token punctuation">:</span> row-reverse wrap <span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 4 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 5 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 6 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 7 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 8 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 9 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
justified-content
justified-content
used to align the position of items with the main axis. There are 6 possible values for the justified-content
attribute:
- flex-start: will set the item starting from main start (and this is also the default value)
- flex-end: will place the item starting from the main end
- center: will place all items in the middle of the main axis
- space-between: will divide evenly the extra space and add it between items
- space-around: will divide the distance at the beginning and the end. The distance between the beginning and the end will be equal to half the distance between the two items together
- space-evenly: will divide the space evenly between items with the item, item and main start, item with main end equally
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> style</span> <span class="token punctuation">></span></span> <span class="token style"><span class="token language-css"> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> <span class="token property">justify-content</span> <span class="token punctuation">:</span> flex-start <span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 4 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
The align-items
attribute is used to determine how flex items are placed in containers along the cross axis.
align-items: stretch
: The length of the item will be equal to the length of the cross axis.align-items: flex-start
: The item is placed at the start of the cross start (top left), and the item size has not been changed.align-items: flex-end
: Item is placed at the beginning of the cross end (bottom left)align-items: center
: Item is placed between the starting point of the cross start and the starting point of the cross end (middle left)align-items: baseline
: The item will be placed according to the characters in that item. The main purpose is to align the line text of items.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> style</span> <span class="token punctuation">></span></span> <span class="token style"><span class="token language-css"> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">height</span> <span class="token punctuation">:</span> 300px <span class="token punctuation">;</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> <span class="token property">align-items</span> <span class="token punctuation">:</span> stretch <span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 4 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
align-items: stretch
align-items: flex-start
align-items: flex-end
align-items: center
align-items: baseline
align-content
Similar to justify-content
only difference is that instead of aligning with the main axis, align-content
aligns with the cros axis.
align-content: stretch
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> style</span> <span class="token punctuation">></span></span> <span class="token style"><span class="token language-css"> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">height</span> <span class="token punctuation">:</span> 300px <span class="token punctuation">;</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> <span class="token property">flex-wrap</span> <span class="token punctuation">:</span> wrap <span class="token punctuation">;</span> <span class="token property">align-content</span> <span class="token punctuation">:</span> stretch <span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> 4 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
align-content: stretch
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
Refer
https://medium.com/better-programming/a-complete-guide-css-flex-box-24f4a9a1e02