flex弹性布局

是什么

• 弹性布局，是一种一维布局模型

一维，即线性布局，所有要布局的元素都会穿在一根线上，如图

• 布局的参与者：1.容器container 2.多个子项item

如何设置flex：

    <div class="container">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>
    .container { 
        display: flex;
      	align-items:center;
}
		.items {
      	flex: 1;
}

上面，父容器的display:flex，用于设置flex布局

align-items:center; 告诉子项目如何统一放置

容器的设置对所有子项生效

.items中的flex: 1; 设置自己的参数

flex各属性—容器属性

flex-direction，规定flex items 排列的方向

• row：默认值，子项水平排列
• column：子项从上到下排列
• row-reverse：子项水平逆序排列
• column-reverse：子项垂直逆序排列

flex-wrap，当子项的宽度固定且超出容器时是否折行展示

当子项宽度超出容器宽度时，容器仍然会把所有子项包裹住，把子项变小而放置于同一行

• no-wrap：默认值，所有子项（宽度减少）放置到一行
• wrap：子项宽度不变，会折行（从上往下折）
• wrap-reverse：子项宽度不变，从下往上折

justify-content，规定子项在容器内沿着主轴的分布方式（如何对齐）

• flex-start：左对齐
• flex-end：右对齐
• center：中间对齐
• space-between：两边对齐，中间均匀分配剩余空间
• space-around：给每个子项赋予空隙，中间缝隙是两边的二倍
• space-evenly：给每个子项赋予相等的空隙

align-items，规定子项在容器内沿着纵轴的分布方式（如何垂直对齐）

• flex-start
• flex-end
• center
• stretch，听说子项会拉伸但我试了之后好像不可以
• baseline，子项文字沿基线对齐

flex—子项属性

order，设置子项在容器中的次序，值为数字，默认为0

用法：子项 { order : 数值 ; }

子项占用空间

• 若子项尺寸累加小于容器空间，子项会按比例延展充满容器剩余空间
• 若子项尺寸累加大于容器空间，子项会按比例收缩直到充满容器空间

容器剩余空间

即容器未被填充的空间

子项有这样一些属性

flex-basis

• 设置子项基准尺寸
• 若设置了值，则子项的基准尺寸为设置的值；若未设置（默认为auto），则子项的基准尺寸为设置的width/height的值

        <div class="float-basis_content">子项1</div>
        <div class="float-basis_content">子项2</div>
        <div class="float-basis_content">子项3</div>
				.float-basis_content:nth-child(1){}
        .float-basis_content:nth-child(2){
            width: 70px;
            flex-basis: auto;
        }
        .float-basis_content:nth-child(3){
            width: 50px;
            flex-basis: 100px;
        }

• 子项1中未设置flex-basis，则默认flex-basis为auto，因为也没有设置width，因此子项基准尺寸由内容决定
• 子项2的flex-basis值为auto，子项占用宽度使用width的宽度，使用子项基准尺寸是70px
• 子项3，flex-basis:为100px，子项基准尺寸使用flex-basis值

flex-grow

• 设置子项按何种比例“瓜分”剩余空间，默认值为0

子项实际尺寸 = 该子项基准尺寸 +（容器空间 - 所以子项基准尺寸之和）* 该子项 flex-grow 、 所有子项 flex-grow 之和

在子项中设置flex-grow，即是把容器剩余空间除以所有子项flex-grow的总和，再把这结果乘以某一子项的flex-grow值再增添到该子项的宽度

        .float-basis_box{
            display: flex;
            width: 400px;
        }
        .float-basis_content:nth-child(1){
            flex-grow: 1;
        }
        .float-basis_content:nth-child(2){
            width: 70px;
            flex-basis: auto;
            flex-grow: 3;
        }
        .float-basis_content:nth-child(3){
            width: 50px;
            flex-basis: 100px;
            flex-grow: 2;
        }

上面代码中，容器的宽度是400px

第一个子项没有设置宽度也没有设置flex-basis，只设置了flex-grow值为1，因此它的宽度为自身内容宽度+（400px - 余子项宽度） / 6 * 1

其余子项宽度计算同理

flex-shrink

• 当子项宽度总和超出容器宽度时，子项如何吸收超出的宽度：

子项实际尺寸 = 该子项基准尺寸 - （所有子项基准尺寸之和 - 容器空间）（该子项基准尺寸 * flex-shrink）/所有子项基准尺寸 * flex-shrink之和

• 当子项宽度总和超出容器宽度时，子项吸收的空间为

（该子项宽度 该子项flex-shrink值）/（各子项宽度 各子项flex-shrink值 相加） * 子项宽度总和超出容器宽度的值

用flex-shrink，设置子项按何种比例”吸收“超出容器的空间，默认值是1。

        .float-basis_box{
            display: flex;
            width: 400px;
        }
        .float-basis_content:nth-child(1){
            width:100px;
        }
        .float-basis_content:nth-child(2){
            width: 170px;
            flex-basis: auto;   
        }
        .float-basis_content:nth-child(3){
            width: 50px;
            flex-basis: 250px;
        }

上面代码，.float-basis_content是三个.float-basis_content的容器，三个子项的宽度总和为520px，超出容器120px。三个子项均无设置flex-shrink，flex-shri值默认为

因此，第一个子项需要吸收的宽度为 ( 100 * 1 ) / ( 1001 + 1701 + 2501 )* * 120 = 23.0777

子项1的宽度为100 - 23.077 = 76.933

flex

flex-grow、flex-shrink、flex-basis的结合

.item {
  flex: 1 2 100px;  /flex-grow:1; flex-shrink:2; flex-basis:100px
	flex: 2;		/flex-grow:2; flex-shrink:1; flex-basis:0;
	flex:auto;	/flex-grow:1; flex-shrink:1; flex-basis:auto;
	flex:1;			/flex-grow:1; flex-shrink:1; flex-basis:0;
	flex:2 50px;	/flex-grow:1; flex-shrink:2; flex-basis:50px;

• flex的三个值分别代表flex-grow、flex-shrink、flex-basis
• flex:auto 和 flex:1 有何区别
• flex:1，即flex-grow:1; flex-shrink:1; flex-basis:0;

子项基准不占空间，因此容器所有空间都作为剩余空间来平分，最终效果是子项完全等分

• flex:auto，即flex-grow:1; flex-shrink:1; flex-basis:auto;

flex-basis为auto，子项基准空间为子项内容空间；因此容器先去除子项内容占据的空间，再平分