目录
弹性布局 弹性盒子
兼容性 IE8及一下不支持
一、父级： 声明弹性盒子
display:flex(行内块元素) inline-flex(行元素)
1、主轴 flex-direction
子级的排列方向 默认 row 左=>右
row row-reverse column column-reverse
2、辅轴 交叉轴 flex-wrap
默认值 nowrap
nowrap wrap wrap-reverse
3、对齐方式
3.1主轴对齐方式 justify-content 默认值flex-start
flex-start flex-end center space-between space-around space-evenly
3.2交叉轴 单轴对齐 align-items 默认值 flex-start
flex-start flex-end center
3.3交叉轴 多轴对齐 align-content
flex-start flex-end center space-between space-around space-evenly
二、属于子级的属性
1、order 排序 默认值 0 值越小越靠前 也可以为负数
<div style="order: 1;">11</div>
<div style="order: -1;">22</div>
<div>33</div>
2、当父盒子宽度大于子盒子总和时
flex-grow 放大 将剩余空间分配 放大默认值为0
(1200px - 900px) / (2 + 1)
<div style="flex-grow: 2;">11</div>
<div style="flex-grow: 1;">22</div>
<div>33</div>
3、当父盒子宽度小于子盒子总和时
flex-shrink 按比例缩小 默认为1
<div style="flex-shrink: 4;">11</div>
<div style="">22</div>
<div>33</div>
4、flex-basis 主轴占比
默认值 原盒子的大小 auto 权重比子盒子本身宽 高
<div style="flex-basis: 400px;">11</div>
<div style="">22</div>
<div>33</div>
5、align-self 默认值 auto
auto flex-start flex-end center
允许子级单个项 与其它项对齐方式不同
依旧是和align-items 相对应 可以覆盖父级align-items ,但是如果设置的是align-content，这个属性就没有效果
<div style="">11</div>
<div style="align-self: flex-start;">22</div>
<div>33</div>
6、最常用 flex:1 占满剩余空间
<div style="flex: 1;">11</div>
<div>22</div>
<div>33</div>