Flex layout makes adaptive page (syntax and case)

Time:2021-4-20

Introduction to flex layout

Flex English for flexible box, translated as elastic box, flex layout is elastic layout.

Flex layout provides great flexibility for the box model. Any container can be specified as flex layout


.box{
    display: flex;
}

In line elements use flex layout


.box{
    display: inline-flex;
}

WebKit prefix must be added to the browser of WebKit kernel


.box{
    display: flex;
    display: -webkit-flex;
}

Note: after using flex layout, the float, clear and vertical align properties will be invalid.

Basic concepts in flex layout

The elements with flex layout are called flex containers, or “containers” for short. All its child elements automatically become members of the container, which is called flex item, or “project” for short.

By default, the container has two axes: a horizontal main axis and a vertical cross axis. The start position of the main axis (the intersection point with the border) is called main start and the end position is called main end; the start position of the side axis is called cross start and the end position is called cross end.

Items are arranged along the main axis by default. The main axis space occupied by a single project is called main size, and the side axis space occupied by a single project is called cross size.

Properties of the container

1、flex-driection
2、flex-wrap
3、flex-flow
4、justify-content
5、align-items
6、align-content

1. Flex driection sets the arrangement direction of items. The default is row

flex-driection: row | row-reverse | column | column-reverse
When set to flex driection: row, effect:

When set to flex drive: row reverse, effect:

When set to flex driection: column, effect:

 

When set to flex – driection : column – Reverse, effect:

 

The following code can be directly copied and saved as an HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    /*Horizontal, left end aligned*/
    flex-direction: row;
    /*Horizontal, right end aligned*/
    /*flex-direction: row-reverse;*/
    /*Vertical, top aligned*/
    /*flex-direction: column;*/
    /*Vertical, bottom aligned*/
    /*flex-direction: column-reverse;*/
    background: #999;
    width: 100%;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
</style>
<div class="box">
    < span > Hello 1 </ span >
    <span>Hello 2</span>
    <span>Hello 3</span>
    <span>Hello 4</span>
</div>

2. Flex wrap sets whether the project is on the same line. The default is nowrap

flex-wrap: wrap | nowrap | wrap-reverse
When set to flex Wrap: wrap, effect:

 

When it is set to flex Wrap: nowrap, the effect (no newline, zooming by default) is as follows:

When set to flex Wrap: wrap reverse, the effect (the first line below) is as follows:

The following code can be directly copied and saved as an HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    /*Line feed*/
    /*flex-wrap: wrap;*/
    /*Do not wrap, default*/
    /*flex-wrap: nowrap;*/
    /*Wrap, the first line below*/
    /*flex-wrap: wrap-reverse;*/
    background: #999;
    width: 100%;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
</style>
<div class="box">
    <span>Hello 1</span>
    <span>Hello 2</span>
    <span>Hello 3</span>
    <span>Hello 4</span>
    < span > Hello 5 </ span >
    < span > Hello 6 </ span >
    <span>Hello 7</span>
</div>

3. The flex flow attribute is a short form of the flex direction attribute and the flex wrap attribute. The default value is row nowrap

4. The justify content property defines the alignment of items on the spindle, and the default value is flex start

justify-content: flex-start | flex-end | center | space-between | space-around
When it is set to justify content: Flex start, the effect:

 

When it is set to justify content: Flex end, the effect:

 

When set to justify – content : Center, effect:

 

When it is set to justify content: space between, the effect:

 

When set to justify – content : space – Around, effect:

 

The following code can be directly copied and saved as an HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    /*By default, items are left aligned*/
    justify-content: flex-start;
    /*Align items right*/
    /*justify-content: flex-end;*/
    /*Align items Center*/
    /*justify-content: center;*/
    /* Align items at both ends */
    /*justify-content: space-between;*/
    /* Each item is equally spaced on both sides */
    /*justify-content: space-around;*/
    background: #999;
    width: 100%;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
</style>
<div class="box">
    <span>Hello 1</span>
    < span > Hello 2 </ span >
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
    <span>Hello 6</span>
    <span>Hello 7</span>
</div>

5、align – The items property defines the alignment of items on the vertical axis. The default value is stretch. It is applicable to the case that the height of items on the vertical axis is different. In order to better see the effect, I add some styles for items

align-items: flex-start | flex-end | center | baseline | stretch
When set to align items: Flex start, the effect:

 

When set to align items: Flex end, effect:

 

When set to align – items : Center, effect:

 

When set to align items: baseline, effect:

 

When set to align items: stretch, effect:

 

The following code can be directly copied and saved as an HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    /*Top alignment of the vertical axis*/
    /*align-items: flex-start;*/
    /*Bottom alignment of the vertical axis*/
    /*align-items: flex-end;*/
    /*Center point alignment of the vertical axis*/
    /*align-items: center;*/
    /*Baseline alignment of the first line of text for an item*/
    /*align-items: baseline;*/
    /*The default alignment, if the project is not set to height or set to auto, will occupy the height of the entire container*/
    align-items: stretch;
    background: #999;
    width: 100%;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
.box span:nth-of-type(2n){
    height: 80px;
    padding-top: 20px;
}
</style>
<div class="box">
    <span>Hello 1</span>
    < span > Hello 2 </ span >
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
    < span > Hello 6 </ span >
    <span>Hello 7</span>
</div>

6. The align content property defines the alignment of multiple axes. This property does not work if the project has only one axis. (that is, you need to set the flex wrap attribute value of the container to wrap) (to make the effect more obvious, I set the height of the container)

align-content: flex-start | flex-end | center | space-between | space-around | stretch
When set to align – content : flex – Start, effect:

 

When set to align content: Flex end, the effect:

 

When set to align content: Center, effect:

 

When set to align content: fspace between, effect:

 

When set to align content: Flex start, the effect:

 

When set to align content: stretch, effect:

 

The following code can be directly copied and saved as an HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    /*Align with the top of the vertical axis*/
    /*align-content: flex-start;*/
    /*Align with the bottom of the vertical axis*/
    /*align-content: flex-end;*/
    /*Align with the midpoint of the vertical axis*/
    /*align-content: center;*/
    /*Align with both ends of the vertical axis*/
    /*align-content: space-between;*/
    /*Each axis is equally spaced on both sides*/
    /*align-content: space-around;*/
    /*The default value. The axis occupies the default value of the whole cross axis*/
    align-content: stretch;
    background: #999;
    width: 600px;
    height: 300px;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
</style>
<div class="box">
    <span>Hello 1</span>
    <span>Hello 2</span>
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
    < span > Hello 6 </ span >
    < span > Hello 7 </ span >
</div>

Properties of the project

1、order
2、flex-grow
3、flex-shrink
4、flex-basis
5、flex
6、align-self

1. Order defines the order in which items are arranged. The smaller the value, the higher the permutation. The default value is 0.

For the first one, set the order property to 10, and for the second one, set the order property to 10 – 1. Set the order property to – 10, the effect is as follows

 

The following code can be directly copied and saved as an HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    background: #999;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
}
.box span:nth-of-type(1){
    order: 10;
}
.box span:nth-of-type(2){
    order: -1;
}
.box span:nth-of-type(5){
    order: -10;
}
</style>
<div class="box">
    <span>Hello 1</span>
    <span>Hello 2</span>
    < span > Hello 3 </ span >
    <span>Hello 4</span>
    <span>Hello 5</span>
</div>

2、flex – The growth attribute defines the magnification of an item. It mainly works when the width of the parent element is greater than the sum of the widths of the child elements. It defines how the child element allocates the remaining width of the parent element. The default value is 0. At this time, the width of the parent element is not required.

As follows, set flex for the first child element – The value of the growth attribute is 1, and the second child element sets flex – If the value of the growth attribute is 1, the remaining width of the parent element will be divided into three equal parts and added to the first and second child elements respectively. The effect is as follows:

The following code can be directly copied and saved as an HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    background: #999;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
.box span:nth-of-type(1){
    flex-grow: 1;
}
.box span:nth-of-type(2){
    flex-grow: 2;
}
</style>
<div class="box">
    <span>Hello 1</span>
    < span > Hello 2 </ span >
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
</div>

For example: take the above example, suppose the width of the parent element is 1000px , The width of each sub element is 100px , The width of 500px is left, and the first sub element is flex – The growth value is 1, and the second sub element is flex – If the growth value is 2, 500px will be divided into three equal parts, and the first sub element will be increased by 500 times 1 / The width of 3px, the second sub element increased by 500 times 2 / The width of 3px

3. The flex shrink property defines the zoom out ratio of the project, which is 1 by default. That is, if there is not enough space, the project will be shrunk.

If the flex shrink property is not set in the project, the default flex shrink value of the project is 1. When the space is insufficient, the project will be reduced in equal proportion. If the flex shrink attribute of an item is 0 and all other items are 1, the item with the flex shrink attribute of 0 will not shrink when the space is insufficient.

The principle of flex shrink is similar to flex grow, so it’s not difficult to understand one another.

4、flex – The basis property defines the spindle space occupied by the project before allocating the extra space ( The default value is auto, which is the original size of the project )

Note: if both flex basis and width attribute values are set for the project, flex basis will override the value of width. For example, set properties to the project at the same time, flex basis: 80px; width:100px; The actual width of the project is 80px;

5. Flex properties

The flex attribute is flex – grow , flex – Shrink and flex – The default value is 0.1 auto.

6、align – Self attribute

The align self property allows a single item to have a different alignment from other items, and can override the align items property. The default value is auto, which means to inherit the align items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

The following code can be directly copied and saved as an HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    background: #999;
    height: 300px;
    align-items: flex-start;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
}
.box span:nth-of-type(3){
    align-self: flex-end;
}
</style>
<div class="box">
    <span>Hello 1</span>
    < span > Hello 2 </ span >
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
</div>

reference resources :

[1] http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2] https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

[3] http://blog.csdn.net/qiudw_01/article/details/47061099

[4] https://www.w3cplus.com/css3/a-guide-to-flexbox-new.html

This article is about how to make adaptive page for flex layout ( Grammar and cases ) That’s all for the article , For more related flex layout adaptive page content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!