开启flex属性布局
display: flex;
换行
flex-wrap: wrap; //正常换行
主轴排列方向:flex-direction
flex-direction
值:row 主轴为水平方向,起点在左端
row-reverse 主轴为水平方向,起点在右端
column 主轴为垂直方向,起点在上面
column-reverse 主轴为处置方向,起点在下沿
内容排列:justfy-content属性
justify-content 定义了项目在主轴上的对齐
flex-start 左对齐
flex-end 右对齐
center 居中
space-around 盒子两侧间隔相等
space-between 两端对齐,中间间隔相等
align-item属性
// 它能取5个值。具体的对齐方式与交叉轴的方向有关
flex-start:交叉轴的起点对齐,垂直方向最上端。
flex-end: 交叉轴的终点对齐,垂直方向最下端。
center: 交叉轴的中点对齐,垂直方向中间。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
flex-wrap属性
// 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
flex-wrap:
值:nowrap
wrap
wrap-reverse