容器属性——添加弹性容器上
flex-direction属性:设置主轴的方向,子元素的排列方向
flex-direction: row; 默认值,主轴方向为水平方向,起点在左端
flex-direction: row-reverse; 主轴方向为水平方向,起点在右端
flex-direction: column; 主轴方向为垂直方向,起点在上方
flex-direction: column-reverse; 主轴方向垂直方向,起点在下方
justify-content 属性:设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,
justify-content: flex-start; 默认值,主轴顶端对齐
justify-content: flex-end; 主轴的末端对齐
justify-content: center; 居中对齐,子元素位于弹性容器的中心
justify-content: space-between; 两端对齐,子元素和子元素之间有空白空间,项目之间的间隔都相等。
justify-content: space-around; 子元素之前、之间、之后都留有空白空间,且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。
space-evenly:弹性项目平均分布在该行上,相邻项目的间隔,项目与容器之间空间相等
align-items属性:弹性子元素在(侧轴)交叉轴上的对齐方式
align-items: stretch; 默认值,如果弹性子元素没有高度或高度为auto,将占满整个容器的高度
align-items: flex-start;子元素在侧轴顶端对齐
align-items: flex-end; 子元素在侧轴末端对齐
align-items: center; 子元素在侧轴中间对齐
align-items: baseline; 子元素在第一行文字的基线对齐
flex-wrap属性:指定弹性盒子的子元素换行方式
flex-wrap: wrap; 换行,第一行显示在上方
flex-wrap: wrap-reverse; 换行,第一行显示在下方
flex-wrap: nowrap; 默认值,不换行
注意:父元素有固定高度且高度大于子元素高之和换行中间有缝隙
父元素高度有内容撑开换行没有缝隙
align-content属性:折行,行与行之间有间隙,去除间隙 ,控制侧轴对齐方式(去掉了中间的间隙)
要设置: flex-wrap: wrap;
align-content: flex-start; 顶端没有行间距
align-content: flex-end; 底对齐没有行间距
align-content: center; 居中没有行间距
align-content: space-between; 两端对齐,中间自动分配
align-content: space-around; 自动分配距离
注意:弹性盒项目为多行时有效