css3 flex layout

The traditional solution for layout, based on the box model, relies on display property + position property + float property.

It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve.

css3 Flex is the abbreviation of Flexible Box, which means "flexible layout", which is used to provide maximum flexibility for the box model.

Any container can be specified as a flex layout.

Notice:

1.dispaly:flex is used on the parent element

2. The flex-direction property determines the direction of the main axis (ie the arrangement direction of the items). flex - direction : row | row - reverse | column | column - reverse ;

3.min/max-width/height can limit the width and height of the small box

As shown below: The traditional is to use floating layout, below we use flex layout

 

    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>

    .box { 
            width : 1000px ; 
            height : 300px ; 
            margin : 0 auto ; 
            display : flex ; /* used on parent element, flexible layout */ 
            flex-direction : row ; /* default row, vertical column */ 
        } 
        . box div { 
            background : rgb(218, 189, 189) ; 
            margin : 1px ; 
            flex : 1; /* The three boxes are divided into three equal parts */ 
            min-width : 100px ; 
            max-height : 500px ; /* It can be used to limit the width and height range of the small box */ 
        } 
        .box div:last-child { 
            flex : 2 ; /* Divide into four parts, the last box is 2 parts, and the remaining two boxes are left with an average of two parts   */ 
        }

More properties about Flex layout can be seen in the rookie tutorial: Flex layout syntax tutorial