CSS学习笔记--flex弹性布局

本文主要参考阮一峰Flex布局教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。

弹性布局给我们网页的布局方式提供了很大的便利，可以很方便的实现各种布局。

一、容器属性和项目属性

　　容器属性

　　容器属性指的是需要实现弹性布局的整体，也就是父布局，可设置的属性有以下6个：

　　1.flex-direction：主轴的排列方式（row | row-reverse | column | column-reverse）

　　2.flex-wrap：换行方式（nowrap | wrap | wrap-reverse）

　　3.flex-flow：flex-direction和flex-wrap的简写

　　4.justify-content：主轴的对齐方式（flex-start | flex-end | center | space-between | space-around）

　　5.align-items：交叉轴的对齐方式（flex-start | flex-end | center | baseline | stretch）

　　项目属性

　　项目属性指的是具体要如何排列的元素的属性，也就是子布局，可设置的属性有以下6个：

　　1.order：项目的排列顺序，值越小越靠前。

　　2.flex-grow：项目的放大比例，即轴线空间多余，该项目放大多少，等比放大。

　　3.flex-shrink：项目的缩小比例，即轴线空间不足，该项目缩小多少，等比缩小。

　　4.flex-basis：在分配多余空间之前，项目占据主轴空间，浏览器根据此属性再计算主轴的剩余空间。

　　5.flex：flex-grow，flex-shrink，flex-basis的简写。

　　补充：

　　1.flex-basis是在放大或缩小之前统计的，先统计完flex-basis的值再计算浏览器是否还有剩余空间来进行flex-grow和flex-shrink的放大缩小。

　　2.flex的缺省值：

　　　默认：0 1 auto

　　　none：0 0 auto

　　　auto：1 1 auto

　　　num(单一数值)：num 1 0%

　　　50%/500px(长度值)：1 1 50%/500px

　　　num1 num2(两个数值)：num1 num2 0%

　　　num 50%(数值+长度值)：num 1 50%

二、圣杯布局

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;
}

CSS学习笔记--flex弹性布局

猜你喜欢