flex弹性布局

display：flex； 

justify-content 属性

此属性定义给父盒子才起作用

justify-content:center      中间居中

justify-content:space-between;    两端对齐 

justify-content:flex-end;     全部到右边

justify-content: space-around;  两边留有一半的间隔空间

align-items 属性

设置或检索弹性盒子元素在侧轴（纵y轴）方向上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch

 align-items:stretch;    填充父盒子的高度 其中子盒子不能给高 宽度不变（默认值

align-items:center;    依据父盒子的高度居中(由左向右排列

align-items:flex-start; 在y轴的最上面排列

align-items:flex-start; 在y轴的最下面排列

flex-direction属性

指定了弹性子元素在父容器中的位置

flex-direction: row;     横向x轴从左到右排列（左对齐），默认的排列方式。

flex-direction: row-reverse; 右对齐，从后往前排，最后一项排在最前面 3 2 1

flex-direction: column;  纵向y轴排列。

flex-direction: column-reverse; 从下往上排，最后一项排在最上面。竖的 3 2 1

flex-wrap属性

用于指定弹性盒子的子元素换行方式。

flex-grow:1;    各占一份(display:flex;写给父盒子

flex-wrap: nowrap | wrap | wrap-reverse;    是否在一行显示 默认nowrap

flex-wrap: wrap;  换行

flex-wrap: wrap-reverse;  反转排序

了解更多