弹性盒模型容器样式
首先是设置在容器上的样式
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
弹性盒模型侧轴和多轴对齐
align-items——定义项目在侧轴上如何对齐,具体的对齐方式与侧轴的方向有关,假设侧轴从上到下:
flex-start 侧轴的起点对齐
flex-end 侧轴的终点对齐
center 侧轴的中点对齐
baseline 项目的第一行文字的基线对齐;stretch(默认值)如果项目未设置高度或设为auto,将占满整个容器的高度
align-content:多根轴线的对齐方式,一根轴该属性无效:
flex-start 与侧轴的起点对齐
flex-end 与侧轴的终点对齐
center 与侧轴的中点对齐
space-between 与侧轴两端对齐,轴线间间隔平均分布
space-around 轴线两侧的间隔相等,所以轴线间间隔比轴线与边框的间隔大一倍
stretch(默认值) 轴线占满整个侧轴