Flex

Flex
/* 设置成flex布局之后，子元素float就失效了 定位仍然可用 */
display: flex;

/* 设置主轴方向 默认不换行 主轴方向从左到右 */
flex-direction: row;

/* 颠倒顺序 */
flex-direction: row-reverse;

/* 主轴方向从上到下 */
/* 变换了主轴 */
flex-direction: column;

/* 颠倒 */
flex-direction: column-reverse;

/* flex布局默认不换行 */
/* 默认情况下，项目都排在一条线（又称"轴线"）上 */
flex-wrap: nowrap;

/* 换行 */
flex-wrap: wrap; 

/* 上下行颠倒 */
flex-wrap: wrap-reverse;

/* 复合属性 设置主轴方向和是否换行的 */
flex-flow:row wrap;
flex-direction: column;

/* 定义了项目在主轴上的对齐方式（因为你的主轴是水平方向的 ） */
justify-content: flex-start; /* 左对齐 */
justify-content: flex-end; /* 右对齐 */
/* 所以 justify-content: center 表示水平方向居中*/

/* flex布局不像绝对定位，脱离文档流，flex布局设置了还是会遵守文档流布局 */
/* 子元素靠边对齐 两端对齐，项目之间的间隔都相等*/
justify-content: space-between;
/* 子元素 左右的距离保持一样 相邻子元素之间的距离会变成2倍*/

/* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
justify-content: space-around;

/* 子元素相邻的距离保持一致 */
justify-content: space-evenly;

 /* 定义项目在交叉轴上对齐方式 */

/* 垂直方向居中 */
align-items: center; 

/* 垂直方向的顶部 交叉轴的起点对齐 */
align-items:flex-start;

/* 垂直方向的底部 交叉轴的终点对齐*/
align-items: flex-end; 

baseline: 项目的第一行文字的基线对齐

/* 垂直方向按照子元素的文字所在的底部位置进行对齐 */
align-items: baseline;

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
align-items: stretch;