flex 布局原理
Flex布局原理就是：给父盒子添加flex属性，来控制子盒子的位置排 列方式从而实现flex布局
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex 布局
flex 布局父项常见属性
改变主轴方向可通过设置flex-direction来改变
row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。
- Flex布局中默认的主轴是row，x轴
- 如果想改变主轴方向可通过设置flex-direction来改变
- flex-direction:column;将主轴改为y轴，纵轴
- flex-direction:row; 将主轴改为x轴，横轴
- flex-direction:row- reverse;主轴为x轴，并且翻转
- flex-direction:column- reverse;主轴为y轴，并且翻转
justify-content设置主轴子元素排列
- 通过justify-content能够设置主轴子元素排列形式
- 值为flex-start 所有子元素在主轴头部显示
- 值为flex-end 所有子元素在主轴尾部显示
- 值为flex-center 所有子元素在主轴居中对齐
- 值为space-around 所有子元素平分剩余空间
- 值为space-between 所有子元素先两边贴边在平分剩余空间
flex-wrap子元素是否换行
- 它可能取三个值。 （1）nowrap（默认）：不换行。 （2）wrap：换行，第一行在上方。 （3）wrap-reverse：换行，第一行在下方。
- 如果想要换行效果设置flex-wrap：wrap
align-items设置侧轴子元素排列
- 利用align-items能够设置侧轴元素对齐的方式在子项为单项（单行） 的时候使用
- align-items的值为flex-start 表示从头开始
- align-items的值为flex-end 表示从结尾开始
- align-items的值为center 表示居中显示
- align-items的值为stretch 会将子元素拉伸
align-content设置侧轴子元素排列
Align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属 性值
Align-item和align-content的区别单行找 align-items 多行找 align-content
flex-flow 就是flex-direction和flex-wrap的合写
flex 布局子项常见属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
flex用来设置分配剩余空间的比列的
flex 可以使用 百分比 来进行 标识 flex:20% (配合换行元素 flex-wrap)
- 剩余空间是指父盒子的宽度减去没有设置flex的盒子的宽度
- 在将剩余空间按占比分配给各个子盒子
- 比列计算：当前子盒子的flex数值/所有flex的总和
使用 flex 完成圣杯布局
<style>
.app {
width: 100%;
height: 300px;
background-color: pink;
display: flex;
}
.ac {
display: block;
width: 200px;
border: 1px solid black;
height: 100%;
}
/* 子类选择器 nth-child */
div span:nth-child(2) {
flex: 1;
background-color: #f2f2ff;
text-align: center;
font-weight: bold;
}
</style>
<body>
<div class="app">
<span class="ac"> 200 px</span>
<span class="ac">圣杯布局</span>
<span class="ac">333</span>
</div>
</body>
align-self 控制子项目自己在侧轴上的排列方式;
- flex-end
- flex-start
order 排列顺序 默认为0
- order: -1;
flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 负值对该属性无效。
容器 父元素
容器的布局方向
容器的排列方向
flex-direction 控制主轴是哪一根，控制主轴的方向 row; 从左往右的x轴 row-reverse;从右往左的x轴 column; 从上往下的y轴 column-reverse;从下往上的y轴
富裕空间的管理 只决定富裕空间的位置，不会给项目区分配空间 主轴
justify-content flex-start： 在主轴的正方向 flex-end: 在主轴的反方向 center： 在两边 space-between： 在项目之间 space-around： 在项目两边
侧轴align-items flex-start：在侧轴的正方向 flex-end： 在侧轴的反方向 center： 在两边 base#ne 基线对齐 stretch 等高布局（项目没有高度）
项目 子元素
弹性空间管理
flex-grow：弹性因子（默认值为0）
新增特性
- 容器 flex-wrap：控制的是侧轴的方向 nowrap 不换行 wrap 侧轴方向由上而下 （flex-shrink失效） wrap-reverse 侧轴方向由下而上 （flex-shrink失效）
align-content：多行/列时侧轴富裕空间的管理（把多行/列看成一个整体）
flex-flow：flex-direction和flex-wrap的简写属性 本质上控制了主轴和侧轴分别是哪一根，以及他们的方向
项目
order：控制项目的排列顺序align-self：项目自身富裕空间的管理flex-shrink：收缩因子（默认值为1）flex-basis：伸缩规则计算的基准值（默认拿width或height的值）侧轴富裕空间的管理 单行单列
align-itemsalign-self（优先级高） 多行多列align-contentflex的简写属性
flex:1 (flex-basis:0% flex-grow:1 flex-shrink:1)等分布局