flex布局

这几天又快忘了flex布局，赶紧回来复习一下下。

常见的父项属性

flex-direction: 设置主轴的方向

row （默认值）从左到右

row-reverse 从右到左

column 从上到下

column-reserve 从下到上

justify-content：设置主轴上的子元素排列方式

flex-start 默认值 从头部开始 如果主轴是x轴，就是从左到右

flex-end 从尾部开始排列

center 从中间开始排列，如果主轴是x轴，则水平居中

space-around 平分剩余的空间

space-between 先两边贴边，再平分剩余的空间

flex-wrap：设置子元素是否换行

nowrap 默认值 不换行

wrap 换行

align-content：设置侧轴子元素排列顺序（多行）

flex-start 默认值从头开始

flex-end 从尾部开始

center 在侧轴中间显示

space-between 子项侧轴先分布在两头，再平分剩余的空间

stretch 设置子项元素高度平分父元素高度

align-items：设置侧轴上的子元素排列方式（单行）

flex-start 从上到下

flex-end 从下到上

center 从中间开始 如果侧轴是y轴，则垂直居中

stretch 拉伸（默认值）

flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex-flow: row wrap;

常见的子项属性

flex子项目占的份数

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数

align-self控制子项自己在侧轴的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

span:nth-child(2) { /* 设置自己在侧轴上的排列方式 */ align-self: flex-end; }

order属性定义子项的排列顺序（前后顺序）

数值越小，排列越靠前，默认为0。注意：和 z-index 不一样

flex-basis

flex-basis 属性规定 flex 项目的初始长度。

flex-shrink

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

flex-grow

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少

希望自己能够记住，嘤嘤嘤~