Flex layout makes adaptive pages (syntax and examples)

Introduction to Flex Layout

Flex in English means flexible box, which means elastic box. Flex layout means flexible layout.

Flex layout provides great flexibility for the box model. Any container can be specified as a Flex layout. The setting method is:

.box{
    display: flex;
}

Inline elements use Flex layout

.box{
    display: inline-flex;
}

The webkit prefix must be added to webkit-based browsers

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

Note: After using Flex layout, the float, clear, and vertical-align properties will become invalid.

Basic concepts in Flex layout

Elements that use Flex layout are called Flex containers, or "containers" for short. All its child elements automatically become container members, called Flex items, or "items" for short.

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

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

Container properties

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 the items, the default is row

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

When set to flex-driection: row-reverse, the effect is:

When set to flex-driection: column, the effect is:

When set to flex-driection: column-reverse, the effect is:

You can directly copy and save the following code as an HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    /*Horizontally, left-aligned*/
    flex-direction: row;
    /*Horizontal direction, right alignment*/
    /*flex-direction: row-reverse;*/
    /*Vertical direction, top alignment*/
    /*flex-direction: column;*/
    /*Vertical direction, bottom alignment*/
    /*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 items are on the same line, the default is nowrap

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

When set to flex-wrap: nowrap, the effect (no line break, scaling by default):

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

You can directly copy and save the following code as an HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    /*line break*/
    /*flex-wrap: wrap;*/
    /*No line break, default*/
    /*flex-wrap: nowrap;*/
    /*Wrap, the first line is 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 shorthand 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 the item on the main axis. The default value is flex-start

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

When set to justify-content: flex-end, the effect is:

When set to justify-content: center, the effect is:

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

When set to justify-content: space-around, the effect is:

You can directly copy and save the following code 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;
    /*right align items*/
    /*justify-content: flex-end;*/
    /* Center the item */
    /*justify-content: center;*/
    /*Align items at both ends*/
    /*justify-content: space-between;*/
    /*Equal spacing on both sides of each item*/
    /*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. The align-items attribute defines the alignment of items on the vertical axis. The default value is stretch, which is suitable for situations where the heights of items on the vertical axis are different. In order to better see the effect, I added some styles to the items.

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

When set to align-items: flex-end, the effect is:

When set to align-items: center, the effect is:

When set to align-items: baseline, the effect is:

When set to align-items: stretch, the effect is:

You can directly copy and save the following code as an HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    /*Align top of vertical axis*/
    /*align-items: flex-start;*/
    /* Bottom alignment of vertical axis */
    /*align-items: flex-end;*/
    /*Align the middle point of the vertical axis*/
    /*align-items: center;*/
    /*Baseline alignment of the first line of text in the project*/
    /*align-items: baseline;*/
    /*Default alignment, if the item has no height set or is set to auto, it will occupy the entire height of the 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 attribute defines the alignment of multiple axes. If the project has only one grid line, this property has no effect. (That is, you need to set the flex-wrap property value of the container to wrap) (In order 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, the effect is:

When set to align-content: flex-end, the effect is:

When set to align-content: center, the effect is:

When set to align-content: fspace-between, the effect is:

When set to align-content: flex-start, the effect is:

When set to align-content: stretch, the effect is:

You can directly copy and save the following code 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 middle point of the vertical axis*/
    /*align-content: center;*/
    /*Align with both ends of the vertical axis*/
    /*align-content: space-between;*/
    /*The spacing on both sides of each axis is equal*/
    /*align-content: space-around;*/
    /*Default value, the axis line occupies the entire cross axis default value, */
    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>

Project Properties

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 ranking. The default value is 0.

The following is the first one setting the order attribute to 10, the second one setting the order attribute to -1, and the fifth one setting the order attribute to -10. The effect is as follows

You can directly copy and save the following code 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. The flex-grow attribute defines the magnification ratio of the 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 elements distribute the remaining width of the parent element. The default value is 0, and the width of the parent element is not requested at this time.

As shown below, the flex-grow attribute value is set to 1 for the first child element and 1 for the second child element. Then 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:

You can directly copy and save the following code 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: Taking the above example, assuming the width of the parent element is 1000px and the width of each child element is 100px, there is 500px of width left. The flex-grow value of the first child element is 1, and the flex-grow value of the second child element is 2. Then the 500px will be divided into three equal parts. The first child element will increase the width by 500 times 1/3px, and the second child element will increase the width by 500 times 2/3px.

3. The flex-shrink attribute defines the reduction ratio of the item. The default value is 1, which means that if there is insufficient space, the item will be reduced.

If the flex-shrink property is not set for the project, the default flex-shrink value of the project is 1. When there is insufficient space, the items will be reduced proportionally. If the flex-shrink property of one item is 0 and the other items are 1, the item with the flex-shrink property of 0 will not shrink when there is insufficient space.

The principle of flex-shrink is similar to flex-grow, and it is not difficult to understand one while the other one is not difficult.

4. The flex-basis property defines the spindle space that the item occupies before allocating extra space (the default value is auto, which is the original size of the item)

Note: If you set both flex-basis and width property values ​​for an item, flex-basis will override the width value. For example, if you set the properties of the project at the same time, flex-basis: 80px; width: 100px; then the actual width of the project is 80px;

5. Flex attribute

The flex property is an abbreviation for flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto.

6. align-self property

The align-self property allows individual items to be aligned differently from other items, overriding the align-items property. The default value is auto, which means inheriting the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

You can directly copy and save the following code 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>

refer to:

[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 is the end of this article about how to use Flex layout to make adaptive pages (grammar and cases). For more relevant Flex layout adaptive page content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!