01_父元素上的属性_justify-content
/* 启用弹性布局 */
display: flex;
justify-content 用于控制子元素在父元素主轴(默认是水平从左向右)的排列以及分布
取值:
flex-start 靠近主轴的起点
center 在主轴的中间对齐
flex-end 靠近主轴的终点
space-between 等距分隔
space-around 等距环绕
space-evenly 平均分
小结:
justify-content 控制子元素在主轴方向 的排列以及分布方式
取值:
排列
flex-start、center、flex-end
分布
space-between、space-around、space-evenly
02_父元素上的属性_align-items
/* 启用弹性布局 */
display: flex;
align-items 用于控制子元素在次轴(默认是垂直的,从上向下)的排列方式
取值:
flex-start 靠近次轴的起点对齐
center 沿次轴中间对齐
flex-end 靠近次轴的终点对齐
stretch 当没有为子元素设置高度,高度与父元素相同
baseline 文字基线对齐
小结:
align-items 用于设置在次轴上的排列方式
取值:
flex-start
center
flex-end
algin-items仅有于在一行的情况下(不换行)
03_父元素上的属性_flex-wrap