display: flex; （设置成flex布局之后，子元素float就失效了，定位仍然可用。）
设置主轴方向：默认，不换行，主轴方向从左到右。 从右到左的顺序：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;子元素靠边对齐 两端对齐，项目之间的间隔都相等。 justify-content: space-around; 子元素 左右的距离保持一样 相邻子元素之间的距离会变成2倍，每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 justify-content: space-evenly; 子元素相邻的距离保持一致。
定义项目在交叉轴上对齐方式：垂直方向居中；align-items: center;垂直方向的顶部 交叉轴的起点对齐；align-items:flex-start; 垂直方向的底部 交叉轴的终点对齐；align-items: flex-end; align-items: baseline;（ baseline: 项目的第一行文字的基线对齐） align-items: stretch;stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
