1. 容器的布局方向和排列方向
???? flex-direction管制主轴是哪一根同时管制主轴的方向(排列形式)
row：从左往右的x轴row-reverse：从右往左的x轴column：从上往下的y轴column-reverse：从下往上的y轴2. 富裕空间的治理
????只决定富裕空间的地位，不会给项目区调配空间
????主轴 :justify-content
flex-start：在主轴的正方向flex-end: 在主轴的反方向center： 在两边space-between：在我的项目之间space-around：在我的项目两边????侧轴 : align-items 治理单行的富裕空间 垂直于主轴的轴
flex-start：在侧轴的正方向flex-end： 在侧轴的反方向center：在两边baseline: 基线对齐stretch: 等高布局（我的项目没有高度）space-aroundspace-evently3. 弹性空间的治理
flex-grow：弹性因子（默认值为0）
4. flex容器（CSS3新增）
???? flex-wrap 管制侧轴的方向 可选值：wrap-reverse、wrap、 nowrap
nowrap 不换行wrap 侧轴方向由上而下（flex-shrink生效）wrap-reverse 侧轴方向由下而上（flex-shrink生效）???? align-content 多行多列时,富裕空间的治理，会把所有行、列看成一个整体
????侧轴富裕空间的治理总结：
单行单列
align-itemsalign-self（优先级高）多行多列
align-content(多行时以它为基准)????flex-flow :flex-direction和flex-wrap的简写属性，实质上管制了主轴和侧轴别离是哪一根，以及他们的方向。
????flex-grow:将主轴上的富裕空间按比例调配到我的项目上!属于定义弹性盒子(flex-item)的弹性因子,默认值为0
????代码示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 400px; height: 300px; border: 1px solid; margin:100px auto; display:flex; /*flex-direction: row;*/ /*flex-wrap: wrap-reverse;*/ flex-flow:row wrap-reverse; justify-content: flex-start; align-items: flex-start; align-content: flex-end; } #wrap > .item{ width: 50px; height: 50px; background: pink; text-align: center; line-height: 50px; flex-grow: 1; } #wrap > .item:nth-child(1){ align-self: center; flex-grow: 4; order:3; } </style> </head> <body> <div id="wrap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body></html>5.flex布局——我的项目新增
order:管制我的项目的排列程序，order越大我的项目越后
align-self：我的项目本身富裕空间的治理
flex-shrink：膨胀因子（默认值为1）；起作用前提：flex-wrap为nowrap；我的项目的总宽度超出容器时，进行伸缩
flex-basis:（默认值为auto）伸缩规定计算的基准值（默认拿主轴width或height的值）
伸缩规定
????flex-grow拉伸因子规定 以下面demo为例
可用空间 = (容器大小 - 所有相邻我的项目flex-basis的总和) 400 - 50*5 =150可扩大空间 = (可用空间/所有相邻我的项目flex-grow的总和) //一个flex-grow所要占据的空间 150/(1*4+4)=18.75每项伸缩大小 = (伸缩基准值flex-basis + (可扩大空间 * flex-grow值)) 50+18.75*1=68.75 50+18.75*4=125 ????flex-shrink 膨胀因子规定
①.计算膨胀因子与基准值乘的总和
var a = 每一项flex-shrink*flex-basis之和a = 1*200+1*4*50=400②.计算膨胀因数
膨胀因数=（我的项目的膨胀因子*我的项目基准值）/第一步计算总和var b = (flex-shrink*flex-basis)/ab = (1*200)/400=1/2 b'=(1*50)/400=1/8③移除空间的计算
移除空间= 我的项目膨胀因数 x 负溢出的空间var c = b * 溢出的空间c = 1/2*|(100-400)| = 150 c' =1/8*300 =37.5剩下的空间→ 我的项目1：200-150=50 其余我的项目：50-37.5=12.5注：外部是个递归循环，如果其中某个我的项目内容增多，比方内容＞12.5， 它会把宽度减去12.5，剩下的值依照规定让其余四个再来承当，重新分配空间
代码示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 100px; height: 400px; border: 1px solid; display:flex; } .item{ width: 50px; height: 50px; background: pink; text-align: center; flex-shrink: 1; } .item:nth-child(1){ width: 200px; } </style> </head> <body> <div id="wrap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body></html>6.flex的简写属性
flex:1 (flex-basis:0% flex-grow:1 flex-shrink:1)
等分布局剖析
flex-basis为0，则可用空间就等于容器的大小；
flex-grow为1，将主轴上富裕空间平均分配到每个我的项目上；
fle-shrink的值影响不大
flex 能够设置弹性元素所有的三个款式： flex 增长 缩减 根底
initial "flex: 0 1 auto". auto "flex: 1 1 auto" none "flex: 0 0 auto" 弹性元素没有弹性 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 400px; height: 300px; border: 1px solid; margin:100px auto; display: flex; } #wrap > .item{ height: 50px; background: pink; text-align: center; line-height: 50px; /*flex-shrink: 1; flex-grow: 1; flex-basis: 0;*/ flex: 1; } </style> </head> <body> <div id="wrap"> <div class="item">11</div> <div class="item">222</div> <div class="item">3333</div> <div class="item">44444</div> <div class="item">555555</div> </div> </body></html> 以上是集体对于flex布局的学习总结，欢送多多交换和学习！如需转载，请分割作者~