flex布局参数详解
⾸先display的⼏种显⽰⽅式
display:block; 转为块级元素
display:inline-block 转为⾏内块元素
display:none; 隐藏元素，不占位置。
display:inline; 将元素转为⾏内元素。
display :flex; 是⼀种布局⽅式。让这个⽗盒⼦具有弹性布局的性质，盒⼦就有了侧周和主轴。默认主轴是⽔平⽅向，侧轴是垂直⽅向。
默认咋弹性盒⼦中的元素是不换⾏的。如果⼦元素的宽度的总和⼤于了⽗盒⼦的宽度，那么弹性布局救护发挥作⽤。 他会⾃动压缩⼦元素，让⼦元素的和可以布局到⽗元素中，这样就实现了适配。
flex布局对齐方式那下⾯总结了flex布局的详细参数：
1—justify-content 控制主轴⽅向的对齐⽅式
justify-content: center；主轴⽅向居中对齐
justify-content: flex-start；从主轴开始的⽅向堆叠
justify-content: flex-end；从主轴结束的地⽅堆叠
justify-content: space-between;⼦元素之间⽤空⽩分割，⼦元素和⽗元素边界没有空⽩
justify-content: space-around；让空⽩在⼦元素之间，空⽩宽度两边⼀致，其他地⽅⼀致
justify-content: space-evenly；将剩余空间⽤空⽩分割，空⽩的地⽅是等宽的。
2—调整主轴的⽅向 flex-direction
flex-direction: column                调整主轴⽅向为垂直⽅向
flex-direction:row；默认的主轴⽅向为⾏。
flex-direction:row-reverse；调整主轴的⽅向从右到左开始。
flex-direction: column-reverse；调整主轴的⽅向从下到上。
3— 控制单⾏侧轴的⽅向 align-items
align-items: flex-start；从侧周开始地⽅对齐
align-items:center；从侧周的中间对齐
align-items:flex-end；从侧周结束的地⽅对齐
4— 控制弹性盒⼦中的元素是否换⾏ （默认不换⾏）
flex-wrap: wrap;          //⼦元素总和放不下⼀⾏的时候，⾃动换⾏
flex-wrap:nowrap;          //默认不换⾏⾃动压缩⼦元素的宽度
5—有多⾏的时候，⽤ align-items 调整侧轴的对齐⽅式是不管⽤的，所以⽤align-content
align-content:flex-start；从侧轴开始的⽅向堆叠
align-content:flex-end；从侧轴结束的⽅向堆叠
align-content:center；从侧轴的中间居中堆叠
align-content:space-around；让侧轴⽅向的盒⼦的剩余空间⽤空⽩分割。
align-content:stretch；让侧轴⽅向的盒⼦拉伸铺满⽗元素⾼度（⼦元素没设⾼度的情况下有⽤。设置⾼度的情况下，⼦盒⼦的⾼度不被拉伸）align-content:space-between；让侧轴⽅向的盒⼦间⽤空⽩分割，两边贴⽗元素边。
align-content:space-evenly；让侧轴⽅向的盒⼦的剩余空间⽤空⽩均分。空⽩占⽐⼀致。
6---设置⼦元素占⽗元素的⽐例，给⼦元素设置的。
flex:1;
后⾯的数值表⽰，所加属性的这个⼦元素占⽗元素是剩余的⼏份，
已经有宽度的⼦元素提前分配不包在总份中。
7--- order 设置⼦元素的排列前后顺序
如果想让最后⼀个⼦元素最开始显⽰，可以添加这个属性，数字越⼩，排在越前⾯。
8--- align-self  如果某⼦元素想重新调整⾃⼰侧轴的对齐⽅式，
就可以⽤这个，属性值同侧轴调整对齐⽅式属性值⼀样。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。