About the Flexbox layout of CSS3 in the graphic code sharing

CSS3 provides us with a scalable and flexible Web page layout-flexbox layout, it has a very powerful function, can easily implement a lot of complex layout, before it appears, we often use the layout method is floating or fixed width + percent to layout, the code is large and difficult to understand.

To better understand the Flexbox layout, here are a few concepts to begin with:

If the following is true:

(1) Spindle (side axis), flexbox the layout of a retractable container in the horizontal and vertical direction into the spindle or the side axis, if you want the telescopic project in this container in the horizontal direction of the telescopic expansion, then the horizontal direction is the spindle, the vertical direction is the side axis, and vice versa;

(2) The length of the spindle (side axis), when determined which is the spindle which is the side axis, the size of the telescopic container in the spindle direction (width or height) is called the spindle length, the side axis direction of the container size (width or height) is called the side axis length;

(3) The spindle (side axis) starting point, spindle (side axis) end point, such as the direction of the spindle is horizontal, usually in the horizontal direction of the page layout is left to right, then the retractable container left border is the spindle starting point, the right border is the spindle end, the side axis is in the vertical direction, usually from top to bottom, So the upper border is the beginning of the side axis, the border is the end of the side axis;

(4) Telescopic container: If you want to build a scalable box, these scalable items must be wrapped up by a box of Display:flex properties, which is called a telescopic container;

(5) Telescopic project: the element which needs to be stretched in the telescopic container is called the scaling project;

After defining the above concepts, we can construct the Flexbox layout.

The first step is to build a flexbox container and place several scalable items in the container, as follows:

CSS code:

. flex-container{            Display:flex;            width:600px;            height:230px;            Background-color: #ccc;        }. flex-item{            Background-color:blue;            width:100px;            margin:5px;        }

HTML code:

<p class= "Flex-container" >       <p class= "Flex-item" >A</p>       <p class= "Flex-item" >B< /p>       <p class= "Flex-item" >A</p>       <p class= "Flex-item" >B</p>   </p>

The effect is as follows:

Four of these projects are arranged horizontally in a row, while the retractable items are aligned at the same time;

Display:flex represents the container as a scalable container and can also be inline-flex, the difference being that the container is rendered as a block-level element, which renders it as an inline element.

There are several default properties that are not set, but the default values do work, and they are:

The flex-direction property, whose value is Row,column,column-reverse,row-reverse, is the default value row, which indicates that the scalable item is expanded horizontally. If the column is taken to represent the expansion of the retractable item in the vertical direction, Column-reverse,row-reverse represents the opposite direction, in layman's words,the flex-direction attribute is used to define the direction of the spindle side axis. Add the Flex-direction:column effect to the above effects as follows:

The justify-content property, which is used to indicate the alignment of the retractable item in the spindle direction, can be taken as a value of flex-start,flex-end,center,space-between,space-around. Where flex-start,flex-end is aligned with respect to the start and end points of the spindle, center represents the center alignment, space-between means that the ends are aligned and the remaining space is evenly distributed in the spindle direction, Space-around represents the center alignment and distributes the remaining space evenly in the spindle direction

Justify-content:space-between

CSS code:

. flex-container{            Display:flex;            width:600px;            height:230px;            Background-color: #ccc;            Justify-content:space-between;        }. flex-item{            Background-color:blue;            width:100px;            margin:5px;        }

The effect is as follows:

You can see that it aligns the various retractable items in the spindle direction and evenly splits the remaining space;

Justify-content:space-around

CSS code:

. flex-container{            Display:flex;            width:600px;            height:230px;            Background-color: #ccc;            Justify-content:space-around;        }. flex-item{            Background-color:blue;            width:100px;            margin:5px;        }

The effect is as follows:

You can see that this property allows the retractable item to be centered in the direction of the spindle and evenly dividing the remaining space;

Align-items Property: This property is used to represent the alignment of the retractable item in the side axis direction, the desirable value is Flex-start,flex-end,center,baseline,stretch, What needs to be explained is the baseline value, which is based on a calculated baseline and then aligns the items along this baseline, and the calculation of the baseline depends on the size and content of the scalable project, as follows:

Align-items:baseline;

CSS code:

. flex-container{            Display:flex;                 Flex-direction:row;            width:600px;            height:230px;            Background-color: #ccc;            Justify-content:space-around;            align-items:baseline;        }        . flex-item{            Background-color:blue;            width:100px;            margin:5px;;        }        . a{            margin-top:10px;            height:100px;        }        . b{            margin-top:20px;            height:150px;        }        . c{            margin-top:30px;            height:80px;        }

HTML code:

<p class= "Flex-container" >       <p class= "Flex-item a" >A</p>       <p class= "Flex-item B" >b </p>       <p class= "Flex-item C" >A</p>       <p class= "Flex-item A" >B</p>   </p >

The effect is as follows:

You can see four retractable items in the side axis (vertical direction) height is different, margin is different, but finally in accordance with a calculated baseline alignment;

Align-items:stretch;

This is a value that allows the retractable item to be stretched in the side-axis direction, provided that the items are not set in the side-axis direction, otherwise they will be rendered according to the size you set.

CSS code:

. flex-container{            Display:flex;            Flex-direction:row;            width:600px;            height:230px;            Background-color: #ccc;            Justify-content:space-around;            Align-items:stretch;        }        . flex-item{            Background-color:blue;            width:100px;            /*height:100px;*/            margin:5px;;        }

HTML code:

<p class= "Flex-container" >       <p class= "Flex-item" >A</p>       <p class= "Flex-item" >b </p>       <p class= "Flex-item" >A</p>       <p class= "Flex-item" >B</p>   </p >

The effect is as follows:

You can see that these retractable items are stretched in the side-axis direction because the height is not set in the vertical direction.

So far, all of our scaling projects have been done on a single row or column, and have not been wrapped and wrapped, theflex-wrap property indicates whether a newline or a column is supported, it has nowrap,wrap,wrap-reverse three values, NoWrap is the default value, which means no wrapping or wrapping, wrap means wrapping or wrapping, wrap-reverse means wrapping or wrapping, but it is arranged in the opposite direction (such as when the spindle is wrapped vertically and then arranged in the order of the first and last)

CSS code:

. flex-container{            Display:flex;            Flex-direction:row;            width:600px;            height:230px;            Background-color: #ccc;            Justify-content:space-around;            Align-items:baseline;            flex-wrap:wrap;        }        . flex-item{            Background-color:blue;            width:100px;            height:70px;            margin:5px;;        }

HTML code:

<p class= "Flex-container" >    <p class= "Flex-item" >A</p>    <p class= "Flex-item" >b</ p>    <p class= "Flex-item" >A</p>    <p class= "Flex-item" >B</p>    <p class= " Flex-item ">A</p>    <p class=" Flex-item ">B</p>    <p class=" Flex-item ">A</p>    <p class= "Flex-item" >B</p></p>

The effect is as follows:

You can see that when a line becomes more difficult to put down, a line will be changed when the scaling increases. The Wrap property guarantees that lines are arranged in the normal top-to-bottom order after wrapping

The align-content property is used to indicate the alignment of each stretch line after a line break, and its value is stretch,flex-start,flex-end,center,space-between,space-around. The meaning and the Align-items attribute value are the same, we divide 7 scaling items into two lines to arrange,

Add the CSS code to the align-content property, the HTML code will not change, as follows :

CSS code:

. flex-container{            Display:flex;            Flex-direction:row;            width:600px;            height:230px;            Background-color: #ccc;            Justify-content:space-around;            Align-items:baseline;            Flex-wrap:wrap;            Align-content:space-between;        }        . flex-item{            Background-color:blue;            width:100px;            height:70px;            margin:5px;;        }

The effect is as follows:

You can see that two telescopic lines are aligned on both sides of the side axis (vertical) direction.

The Flex-flow property, which is a complex property, is a composite property of Flex-direction and Flex-wrap, and Flex-direction:row;flex-wrap:wrap is equivalent to Flex-flow : Row Wrap

The Order property , which is used to indicate how the scaling items are arranged, normally the scaling items are arranged according to the spindle starting point to the end of the spindle, and a newline or a newline is arranged according to the beginning to end of the axis (unless some Alignment of the reverse), but in some cases this default display order does not meet the requirements, you can use to add the Order property to the scaling item to specify the order, by default, the order of each scaling item is 0, the property can be positive negative, the larger the value will be arranged in the back.

CSS code:

. flex-container{            Display:flex;            width:600px;            height:230px;            Background-color: #ccc;            Justify-content:space-around;            Align-items:baseline;                Flex-flow:row Wrap;            Align-content:space-between;        }        . flex-item{            Background-color:blue;            width:100px;            height:70px;            margin:5px;;        }        . order1{            order:1;        }        . order2{            order:2;        }

HTML code:

<p class= "Flex-container" >    <p class= "Flex-item order1" >1</p>    <p class= "Flex-item  Order2 ">2</p>    <p class=" Flex-item ">3</p>    <p class=" Flex-item ">4</p>    <p class= "Flex-item" >5</p>    <p class= "Flex-item" >6</p>    <p class= "Flex-item ">7</p>    <p class=" Flex-item ">8</p></p>

The effect is as follows:

By default, the HTML is displayed in order 1-8, but because the order is greater than 0 for P1 and 2, they are placed at the last display (because the order default properties of the other p that are not set are 0)

The margin property plays a powerful role in the Flexbox layout, and if you set the margin in a direction to auto for a scalable item, the retractable item will occupy the remaining space in that direction in that direction as a margin in that direction.

CSS code:

. flex-container{            Display:flex;            width:600px;            height:230px;            Background-color: #ccc;            Justify-content:space-around;            Align-items:baseline;            Flex-flow:row Wrap;            Align-content:space-between;        }        . flex-item{            Background-color:blue;            width:100px;            height:70px;            margin:5px;;        }        . a{            Margin-right:auto;        }

HTML code:

<p class= "Flex-container" >    <p class= "Flex-item a" >1</p>    <p class= "Flex-item  " >2</p>    <p class= "Flex-item" >3</p></p>

The effect is as follows:

Because Margin-right is added to auto for the scaling item 1, it is exclusive of the bank's remaining space as its right margin value.

With this feature, we can easily center the vertical horizontal of the retractable element in the Flexbox layout,

CSS code;

. flex-container{            Display:flex;            width:600px;            height:230px;            Background-color: #ccc;            Justify-content:space-around;            Align-items:baseline;            Flex-flow:row Wrap;            Align-content:space-between;        }        . flex-item{            Background-color:blue;            width:100px;            height:70px;            margin:5px;;        }        . a{            Margin:auto;        }

HTML code:

<p class= "Flex-container" >    <p class= "Flex-item a" >1</p></p>

The effect is as follows:

The align-self property, which sets its own alignment on the side axis for each of the scalable items, is set as a whole by the Align-item property previously set on the container, and all elements are aligned in the same way. The Align-self property overrides the previous Align-item property so that each retractable item has a different alignment on the side axis, with the same value and Align-item:

CSS code:

. flex-container{            Display:flex;            Flex-direction:row;            width:600px;            height:230px;            Background-color: #ccc;            Justify-content:space-around;            Align-items:baseline;            Align-content:space-between;        }        . flex-item{            Background-color:blue;            width:100px;            height:70px;            margin:5px;;        }        . a{            align-self:flex-start;        }        . b{            align-self:flex-end;        }        . c{            align-self:center;        }

HTML code:

<p class= "Flex-container" >    <p class= "Flex-item a" >1</p>    <p class= "Flex-item  B" >2</p>    <p class= "Flex-item C" >3</p></p>

The effect is as follows:

You can see that the three scaling items are given different alignments on the side axis.

Flex Properties, which are added to the scale, defines how the scaling items are assigned to the spindle size, usually auto or digital, and the auto browser is automatically divided, and the number is allocated in accordance with the number of the scale.

This property overrides the size of the scaling item on the spindle, and when the scaling is set to the spindle (width or height) and this property, the space allocation is actually performed according to this property.

CSS code:

. flex-container{            Display:flex;            Flex-direction:row;            width:600px;            height:230px;            Background-color: #ccc;            Justify-content:space-around;            Align-items:baseline;            Align-content:space-between;        }        . flex-item{            Background-color:blue;            width:100px;            height:70px;            margin:5px;;        }        . a{            Align-self:flex-start;            flex:1;        }        . b{            align-self:flex-end;            flex:2;        }        . c{            Align-self:center;            flex:1;        }

HTML code:

<p class= "Flex-container" >    <p class= "Flex-item a" >1</p>    <p class= "Flex-item  B" >2</p>    <p class= "Flex-item C" >3</p></p>

The effect is as follows:

You can see that the scale has been set to a width, but eventually the horizontal space is split according to the flex scale we set.