共计 3515 个字符，预计需要花费 9 分钟才能阅读完成。
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-around
space-evently
3. 弹性空间的治理
flex-grow：弹性因子（默认值为 0）
4. flex 容器（CSS3 新增）
???? flex-wrap 管制侧轴的方向 可选值：wrap-reverse、wrap、nowrap
nowrap 不换行
wrap 侧轴方向由上而下（flex-shrink 生效）wrap-reverse 侧轴方向由下而上（flex-shrink 生效）???? align-content 多行多列时, 富裕空间的治理，会把所有行、列看成一个整体
???? 侧轴富裕空间的治理总结：
单行单列
align-items
align-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)/a
b = (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 布局的学习总结，欢送多多交换和学习！如需转载，请分割作者~
正文完
