Elastic CSS layouts study notes --flex

In this paper, reference Ruan Yifeng Flex layout tutorial http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html .

Elastic layout to our Web page layout provides a great convenience, can easily achieve a variety of layouts.

First, container properties and project properties

　　Container Properties

　　Container attribute refers to the need to achieve the overall layout of the elastic, i.e. the layout property of the parent, you may be provided in the following six:

　　1.flex-direction: the arrangement of the spindle ( row | row-reverse | column | column-reverse)

　　2.flex-wrap: wrap mode ( nowrap | wrap | wrap-reverse)

　　3.flex-flow: flex-direction and flex-wrap shorthand

　　4.justify-content: spindle alignment (F lex-start | flex-end | center | space-between | space-around)

　　5.align-items: cross-axis alignment ( flex-start | flex-end | center | baseline | stretch)

　　Project Properties

　　Item attribute refers to the specific arrangement of how the properties of the element, i.e. sub-layout attribute can be set has the following six:

　　1.order: the order item, the lower the value the front.

　　2.flex-grow: project an enlarged scale, i.e., the axis of the excess space, it magnifies the number, geometric amplification.

　　3.flex-shrink: reduced scale projects, namely lack of space axis, which reduced the number of projects, down-scaling.

　　4.flex-basis: prior to the dispensing of extra space occupied by the spindle project space, and then calculates the remaining space browser spindle according to this property.

　　5.flex: flex-grow, flex-shrink, flex-basis shorthand.

　　Supplementary :

　　1.flex-basis before statistical enlarged or reduced, to complete statistical flex-basis value recalculated if space remains in the browser to zoom flex-grow, and flex-shrink reduction.

　　2.flex default values:

　　　Default: 0 1 auto

　　　none：0 0 auto

　　　Car: January 1 Car

　　　NUM (single value): num 1 0%

　　　50% / 500px (length value): 1 1 50% / 500px

　　　num1 num2 (two values): num1 num2 0%

　　　num 50% (+ numeric length value): num 1 50%

Second, the Holy Grail layout

HTML：

<body>
    <div class="shengbei">
        <header></header>
        <div class="content">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <footer></footer>
    </div>
</body>

CSS：

.shengbei{
    display: flex;
    height: 100vh;
    flex-direction: column;
}
header,footer{
    flex: 0 0 5em;
    background-color: gray;    
}
.content{
    flex: 1;
    display: flex;
    background-color: skyblue;
}
.center{
    flex: 1;
    background-color: slateblue;
}
.left,.right{
    flex: 0 0 5em;
    background-color: springgreen;
}

Elastic CSS layouts study notes --flex

Guess you like