当前位置：网站首页>Flex layout

What is? flex Layout ？
Its origin ： Because the traditional layout solution is too complex , for example ： Vertical center 、 Fixed at both ends, adaptive in the middle .2009 year ,W3C Put forward a new scheme ——flex Layout
Also called telescopic layout ,flex Layout
What's the advantage of it ？
benefits ： Simple 、 flexible 、 The adaptive
First experience ：

flex Layout - Use steps

First step ： Set... For the parent box display: flex;
Once the parent box is added display: flex; Two things will happen ：
- The parent box becomes an elastic box （Flexbox）, Commonly referred to as Containers , The father box is still old , The original , The sub box is a brand new box
- The child element becomes a new Box , Not in the industry 、 Block in row , Nor is it a block level element （ No matter what type the child element is , Now you can set width、height、 four margin、 four padding 了）, Commonly referred to as project
The second step ： Add attributes to the parent box or child elements to control the layout of child elements in the parent box
Example ：M·M·F hut

flex Layout - Understand the main shaft and side shaft

flexbox There are two axes in the ：

Spindle （ Default level , And from left to right ）
Side axle （ Default vertical , And from top to bottom ）

Their relationship ：

Always be vertical

effect ：

control Flexbox The arrangement of sub elements

Particular attention ：

The child elements are always arranged in the direction of the principal axis

Properties of the container

Set the direction of the spindle

flex-direction: row That's ok ( The default value is ) | row-reverse Reverse the opposite  | column column  | column-reverse;
/*
	row: Indicates horizontal from left to right 
	row-reverse: Indicates horizontal from right to left 
	column:  Indicates vertical from top to bottom 
	column-reverse: Indicates vertical from bottom to top 
*/

Be careful ：

When flex-direction Set to column or column-reverse when , The side axis automatically changes to the horizontal direction , The reason is that they should always be vertical
The attribute of side axis direction is not set

Set spindle alignment

justify-content: flex-start( The default value is ) | flex-end | center |  space-between | space-around | space-evenly average ;
/*
flex-start（ The default value is ）： Align left 
flex-end： Right alignment 
center：  In the middle 
space-between： full-justified , The intervals between the items are all equal .
space-around： The spacing between each item is equal . therefore , The spacing between items is twice as large as the spacing between items and the border .
space-evenly： Between the project and the project 、 Between item and border , The distances are equal 
*/

Set side axis alignment （ A single ）

align-items: stretch( The default value is ) | flex-start | flex-end | center | baseline;
/*
stretch（ The default value is ）： If the project is not set to height or set to auto, Will fill the entire container .
flex-start： Align the starting points of the intersecting axes .
flex-end： The ends of the intersecting axes are aligned .
center： Align the midpoint of the intersecting axis .
baseline:  Baseline alignment of the first line of text for the project .
*/

flex Layout - Item attribute

Set the magnification of the item

flex-grow: <number>;
/*  The default is 0, That is, if there is any remaining space , And don't zoom in . */

Set the reduction scale of the project

flex-shrink: <number>;
/*  The default is 1, That is, if there is not enough space , The project will shrink . */

Set before allocating extra space , Spindle space occupied by the project

flex-basis: <length> | auto;
/*  The default is auto, The size of the project itself . But once the value is set , The width invalid . */

flex Compound attribute

flex: flex-grow flex-shrink flex-basis;
/*  The default is  0 1 auto   namely ： The initial width is determined by width decision , Don't zoom in , But it can shrink */

/*  Its value has these ：*/
flex: auto; <=> flex: 1 1 auto;  /*  The width of the child element is determined by width decision , And you can zoom in and out  */
flex: none; <=> flex: 0 0 auto;  /*  The width of the child element is determined by width decision , And you can't zoom in or out  */
flex: 0; <=> flex: 0 1 0%;  /*  The width of the subelement is 0（ If there is content in it, it will open ）, And it cannot be magnified  */
flex: 1; <=> flex: 1 1 0%;  /*  The width of the subelement is 0（ If there is content in it, it will open ）, I take up the remaining space of the parent box 1 Share  */
flex: 9; <=> flex: 9 1 0%;  /*  The width of the subelement is 0（ If there is content in it, it will open ）, I take up the remaining space of the parent box 9 Share  */

/*  Add  */
flex：<number>;  How to calculate ？（ Father's box width/ Sub box number The sum of the ）*  Their own number value  =  My final width

flex The layout realizes the Holy Grail layout

        /* flex Layout  */
        .box {
            display: flex;
            height: 50px;
        }
        .box .left, .box .right {
            /*  effect :  Neither zoom in nor zoom out  */
            flex: none;
            width: 100px;
            height: 100%;
            background-color: blue;
        }
        .box .middle {
            /*  effect :  Both zoom in and out  */
            flex: auto;
            height: 100%;
            background-color: red;
        }


       <div class="box">
         <div class="left"></div>
         <div class="middle"></div>
         <div class="right"></div>
       </div>

Set the individual side axis alignment of child elements

align-self: auto( The default value is ) | stretch | flex-start | flex-end | center

flex Layout - A few notes

flex:none; Neither zoom in nor zoom out

flex:auto; Zoom in and out

To use for an element flex Layout , Is to set its parent element display: flex; Then its child elements can be laid out through these attributes , The parent element itself has not changed
flex Layout only works on child elements , It has no effect on the grandson element
problem ： If you want to use it for your grandchildren flex Layout , How to do it? ？
answer : Nesting uses flex Layout
flex Layout of sub elements float、clear、vertical-align Become unavailable . as a result of flex The box has controlled the layout method that needs to be controlled by these attributes , So these attributes can't be used

flex Layout - Use flex Layout solution common layout cases

The holy grail layout （ Fixed at both ends, adaptive in the middle ）
Horizontal vertical center
Divide the box equally

flex Layout - When to use flex Layout

Traditional layout

Compatibility is good.
Complicated layout
limitations , It can't be well laid out on the mobile end

flex Layout

It is easy to operate , The layout is very simple , The mobile terminal is widely used
IE11 Or earlier versions do not support flex Or only partial （ Less important ）

summary ：

Mobile ： The preferred flex Layout

pc End ：