CSS(4) CSS3伸缩布局

1、传统css布局的局限性

布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便。

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

2、CSS3伸缩布局

display: flex;

• 设置父容器为伸缩盒子，会使每一个子元素自动变成伸缩项。
• 当子元素的宽度和大于父容器宽度的时候，子元素会自动平均收缩
• 在父容器中设置。

flex-direction：

• 设置子元素在主轴方向上的排列方式：默认是row即水平方向。
• 在父容器中设置。
• row:水平排列方向，从左到右 即第一行为1,2,3,4
• row-reverse:水平排列方向，从右到左，即第一行为4,3,2,1
• column:垂直排列方向，从上到下，即第一行为1，第二行为2，第三行为3，第四行为4
• column-reverse：垂直排列方向，从下到上，即第一行为4，第二行为3，第三行为2，第四行为1

justify-content：

• 设置子元素在主轴方向上的对齐方式，在父容器中设置。
• 需要根据flex-direction属性值的设置而定，假设flex-direction值为row，那么排列方式为左中右，如果为column，那么排列方式为上中下
• flex-start:让子元素从父容器的起始位置开始排列，类似所有子元素在父元素中靠左对齐（靠顶对齐）
• flex-end:让子元素从父容器的结束位置开始排列，类似所有子元素在父元素中靠右对齐（靠底对齐）
• center:让子元素从父容器的中间位置开始排列，类似所有子元素在父元素中居中对齐
• space-between:左右（顶底）对齐父容器的开始和结束，中间平均分布，产生相同的间距
• space-around:将多余的空间平均的分布在每一个子元素的两边。造成中间盒子的间距是左右两边盒子间距的两倍

align-items:

• 设置子元素(伸缩项)在侧轴方向上的对齐方式，
• 在父容器中设置。
• center:设置在侧轴方向上居中对齐
• flex-start:设置在侧轴方向上顶(左)对齐
• flex:end:设置在侧轴方向上底（右）对齐
• stretch:拉伸：让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向>> 默认值
• baseline:文本基线

flex-wrap:

• 控制子元素是否换行显示，默认不换行。在父容器中设置。
• nowrap:不换行，当子元素宽度之和大于父元素时，则会进行收缩，让这些子元素在父元素一行中显示。
• wrap:换行，当子元素宽度之和大于父元素时，不会进行收缩，而是让这些子元素在父元素中换行显示。
• wrap-reverse:翻转。默认子元素的排列是从上到下，如果1,2,3,4,5，假设一行只能排4个子元素，那么第一行为1,2,3,4，第二行为5，翻转后就是从下到上来排列，则变成了第一行为5，第二行为1,2,3,4。

flex-flow:

• 是flex-direction和flex-wrap的综合.
• 如：flex-flow:row wrap;//要求子元素从左到右排列，如果父元素宽度不够时，子元素需要换行

 

flow-grow:

• 在子元素中设置。
• 设置子元素扩展比例，即当前子元素应该占父元素剩余空间的比例值
• 比例值计算 ：当前空间的flex-grow/所有兄弟元素的flex-grow的和
• flex-grow的默认是0:说明子元素不会去占据剩余的空间，即该子元素不会主动扩张宽度。
• 假设某父元素的宽度为1000px，一共有3个子元素，每个子元素的宽度为300，那么还剩余100px。如果所有子元素的flex-grow都为0，那么会有100px的剩余空间。如果所有子元素的flex-grow都为1（或者2,3），那么表示这剩下的100px的空间被3个子元素平分，那么每个子元素的实际宽度为333.33px。如果第一个子元素的flex-grow为1，第二第三个子元素的flex-grow为2，那么第一个子元素的实际宽度为320，第二第三子元素的实际宽度为340.

 

flex-shrink:

• 在子元素中设置。
• 设置子元素收缩比例，通过设置的值来计算收缩空间。
• 比例值计算 ：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
• flex-shrink默认值为1。
• 假设某父元素的宽度为800px，一共有3个子元素，每个子元素的宽度为300，如果需要在一行中显示，那么父元素还差100px的宽度。如果所有子元素的flex-shrink都为0，那么表示所有的子元素都不收缩，那么第三个子元素可能会被挤到下一行（需要看flex-wrap的值）显示。如果所有子元素的flex-shrink都为1（或者2,3,4），那么表示这差的100px的空间被3个子元素平分，那么每个子元素的实际宽度为266.67px。如果第一个子元素的flex-grow为1，第二第三个子元素的flex-grow为2，那么第一个子元素的实际宽度为280px，第二第三子元素的实际宽度为260.

 

flex属性：

• flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
• flex:数值;//用来设置当前伸缩子项占据剩余空间的比例值

3、小结：

在父元素中设置：

• display: flex 设置为伸缩盒子
• flex-direction：设置子元素在主轴方向上是按行还是按列排放
• justify-content：设置子元素在主轴方向上的对齐方式
• align-items：设置子元素在测轴方向上的对齐方式
• flex-wrap：设置子元素在主轴方向上是否换行
• flex-flow：是flex-direction和flex-wrap的综合

在子元素中设置：

• flex-grow：设置子元素扩展比例
• flex-shrink：设置子元素收缩比例
• flex：是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。如flex:数值。

4、案例：

要求用伸缩项盒子方式实现上中下，中间分为左右且随父容器高度的增加而增加，减少而减少，上下部分高度固定。

 

<div class="layout">

<header></header>

<main>

<article></article>

<aside></aside>

</main>

<footer></footer>

</div>

<style>

*{

            padding: 0;

            margin: 0;

        }

        .layout{

            width: 500px;

            height: 600px;

            background-color: #CCCCCC;

            margin:10px auto;

            /*设置父容器为伸缩盒子*/

            display: flex;

            /*默认的主轴是row,这里需要以列的方式进行排列，否则会将header、main、footer挤在一行*/

            flex-direction: column;

        }

        header{

            width: 100%;

            height: 60px;

            background-color: red;

        }

        main{

            width: 100%;

            background-color: green;

            /*让当前伸缩项占据父容器的剩余空间，即父容器减去头低后的剩余空间*/

            flex: 1;

            /*让main成为伸缩盒子*/

            display: flex;

        }

        main > article{

            height: 100%;

            flex: 1;//让此元素占据父元素空间宽度的25%

            background-color: pink;

        }

        main > aside{

            height: 100%;

            flex: 3;//让此元素占据父元素空间宽度的75%

            background-color: darkblue;

        }

        footer{

            width: 100%;

            height: 80px;

            background-color: purple;

        }

</style>