flex布局深入浅出

flex之前使用：

normal flow （文档流）
float + clear
position fixed relative absolute
display：inline-block
负margin
....

这些属性不仅多，麻烦，还互相影响，flex就不一样了，flex一招制敌在于以下几点：

1.块级布局侧重垂直布局，行内布局侧重水平布局，flex布局与方向无关，只用其中一个属性flex-direction便可自由控制，2.通过，felx-grow和 flex-shrink，flex属性实现空间自由分配，3.通过align-items，justify-content实现自动对齐

4.通过order随意改变元素顺序，神通广大

5.flex 适用于简单的线性布局，更复杂的得靠另外一个大佬 grid，之后会有详谈我认为的重点：1.display:flex 可直接将子元素水平排列，无论是block还是inline，inline-*2.水平上布局一般justify-content,如果设置flex-direction:column，可影响垂直分布3.垂直布局一般 align-items,如果设置flex-direction:column，可影响水平分布4.想要左右两个元素按比例占满容器：.first{flex:1} .second{flex:1.5} 表示左边右边是左边的 1.5 倍5.align-content 表示多行时具体以什么标准在整个容器内布局，这个属性用的较少

下面属性讲解依赖于本图：

一：flex:语法

1>.基本概念 Flexible Box 「弹性布局」设置后：float,clear,vertical-align将失效

2>.容器属性 A.flex-direction：主轴方向 row | row-reverse | column | column-reverse;

PS:主轴由flex-direction 决定，设置为 column，主轴为竖著的，则align-items和justify-content反著起作用

B.flex-wrap：默认情况下，项目都排在主轴（main axis）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 nowrap | wrap | wrap-reverse;

C.flex-flow : flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 <flex-direction> <flex-wrap>

E.align-items:定义项目在交叉轴上如何对齐。 flex-start | flex-end | center | baseline | stretch（默认）;

3>.项目属性 A.order：可改变项目的排列顺序。数值越小，排列越靠前，默认为0。

B.flex-grow:定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

C.flex-shrink:定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

D.flex-basis:定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

E.flex:flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

快捷键：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

二：flex练习1.骰子布局 3*3 约定：

所有置display:flex;可直接将所有子元素水平排列，且默认不换行，且宽度强制可变 1.单项目： a. 位置1：display:flex;默认首行左对齐， b. 位置2：justify-content:center; c. 位置3：justify-content:flex-end; d. 位置4：align-items : center; e. 位置5：justify-content:center;align-items:center; f. 位置6：justify-content:flex-end;align-items:center;

g. 位置7：justify-content:flex-start;align-items:flex-end;

f. 位置8：justify-content:center;align-items:flex-end g. 位置9：justify-content:flex-end;align-items:flex-end; 2.双项目： a. 1,3位置：justify-content:space-between; b. 1,7位置：justify-content:space-between;flex-direction: column; c. 2,8位置：flex-direction: column;justify-content: space-between;align-items: center; d. 3,9位置：flex-direction: column;justify-content: space-between; align-items:flex-end; e. 1,5位置： item:nth-child(2){align-self:center} f. 1,9位置： box{justify-content:space-between}

item:nth-child(2){align-self:flex-end}

....

3.三项目： a. 1,5,9位置: box{justify-content:space-between} //可无 item:nth-child(2){align-self:center} item:nth-child(3){align-self:flex-end} b. 3,5,7位置：顺序反写 box{justify-content:space-between} //可无 item:nth-child(1){align-self:flex-end} item:nth-child(2){align-self:center} item:nth-child(3){align-self:flex-start} c.7,8,9位置： box{align-items: flex-end;} d.4,5,6位置： box{align-items: center;} ... 4.四项目： a. 1,2,3,9位置：flex-flow: wrap; justify-content: flex-end; align-content: space-between; b. 1,2,7,9位置;

<div class="box"> <div class="column"> <span class="item"></span> <span class="item"></span> </div> <div class="column"> <span class="item"></span> <span class="item"></span> </div> </div> .box{display:flex; flex-direction:column; justify-content:space-between} .column{display:flex;justify-content:space-between};

...

5.六项目： a. 123,789位置：flex:wrap; align-content:space-between; b. 147,369位置：display: flex; flex-direction: column; flex-wrap: wrap; align-content:space-between;

6.九项目：

flex-wrap: wrap; justify-content: space-between; align-content: space-between;

2.基本网格布局

主要在项目上用父容器设置 display:flex;子元素动态分割剩余宽度 flex: flex-grow | flex-shrink | flex-basis; flex全为1，平均分配3.百分比布局某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。比如 .item{flex:1} .item2{flex:0 0 5px} .item3{flex: 0 0 50%}4.圣杯布局：左右固定，中间自适应

<header>头部</header> <section> <div class="left">左边</div> <div class="center">中间</div> <div class="right">右边</div> </section> <footer>底部</footer>

CSS:

body{ display: flex; flex-flow: wrap column; } header,footer{ background-color: aqua; flex: 1; height: 8vh; } section{ display: flex; } .left,.right{ flex:0 0 150px; background-color: red }