display: flex;弹性盒模型
加在其父元素上,
flex-direction: ; 决定主轴方向及项目其他方向
flex-direction: row;默认水平方向从左往右
flex-direction: row-reverse; 水平方向从右往左
flex-direction: column; 垂直方向从上到下
flex-direction: column-reverse; 垂直方向从下到上排列
flex-wrap: nowrap; 不换行,默认值
flex-wrap: wrap; 换行,第一行在上方
flex-wrap: wrap-reverse; 换行,第一行在下方
flex-flow: ; 复合属性,flex-direction: 和 flex-wrap:
简写 flex-flow: column-reverse wrap;
/* 如果只写一个值,另一个就是默认值 */
justify-content主轴上的对齐方式
justify-content: flex-end; 右对齐
justify-content: flex-start; 默认值左对齐
justify-content: center; 居中,就算有margin内容也会居中
justify-content: space-between; 两端对齐
justify-content: space-around; 项目间隔相等,不受margin干扰,会把margin大小计算在内
justify-content: space-evenly; 项目之间的间距和项目与边框的间距都相等,会受到子元素margin的影响
align-items:起点对齐方式(交叉轴对齐)
align-items: flex-start; 起点对齐(默认值)
align-items交叉轴对齐方式
align-items: flex-end; 交叉轴终点对齐
align-items: center; 交叉轴 中点对齐
align-items: baseline; 第一行文字的基线对齐,需要给第一行文字设置行高
align-items: stretch; 如果位置高度或auto, 将沾满整个容器的高度