弹性盒模型容器样式和对齐⽅式
弹性盒模型容器样式
⾸先是设置在容器上的样式
display:flex——将容器设置成弹性盒⼦，项⽬(⼦元素)的排列⽅式将按照弹性盒⼦规则进⾏排布
flex-direction——设置主轴⽅向，项⽬默认会按照主轴⽅向进⾏排列
flex-wrap——当项⽬总宽度⼤于容器宽度时的处理⽅式，默认会不换⾏，压缩所有项⽬
flex-flow——flex-direction属性和flex-wrap属性的简写默认值为row nowrap
justify-content——单⾏项⽬在主轴⽅向上的对齐⽅式
align-items——单⾏项⽬在侧轴⽅向上的对齐⽅式
align-content——多⾏项⽬在侧轴⽅向上的对齐⽅式
flex-direction——主轴的⽅向(即项⽬的排列⽅向)
row(默认值) 主轴为⽔平⽅向，起点在左端
row-reverse 主轴为⽔平⽅向，起点在右端
column 主轴为垂直⽅向，起点在上沿
column-reverse 主轴为垂直⽅向，起点在下沿
弹性盒模型换⾏和单⾏对齐
flex-wrap——如果⼀条轴线排不下，如何换⾏：
nowrap(默认)：不换⾏(此时会根据flex-shrink缩⼩⽐例把项⽬进⾏压缩以放⼊容器)
wrap：换⾏，第⼀⾏在上⽅
wrap-reverse：换⾏，第⼀⾏在下⽅
justify-content——定义了项⽬在主轴上的对齐⽅式，具体对齐⽅式与轴的⽅向有关，假设主轴为从左到右：
flex-start(默认值) 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项⽬之间的间隔都相等
space-around 每个项⽬两侧的间隔相等，所以项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍
左重右轻布局，⽤弹性盒模型，最后⼀个元素设置margin-left:auto
弹性盒模型侧轴和多轴对齐
flex布局对齐方式align-items——定义项⽬在侧轴上如何对齐，具体的对齐⽅式与侧轴的⽅向有关，假设侧轴从上到下：
flex-start 侧轴的起点对齐
flex-end 侧轴的终点对齐
center 侧轴的中点对齐
baseline 项⽬的第⼀⾏⽂字的基线对齐；stretch(默认值)如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度
align-content：多根轴线的对齐⽅式，⼀根轴该属性⽆效：
flex-start 与侧轴的起点对齐
flex-end 与侧轴的终点对齐
center 与侧轴的中点对齐
space-between 与侧轴两端对齐，轴线间间隔平均分布
space-around 轴线两侧的间隔相等，所以轴线间间隔⽐轴线与边框的间隔⼤⼀倍
stretch(默认值) 轴线占满整个侧轴

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