一、flex-direction:决定项目的方向

row默认值，元素将水平显示，正如一个一行一样→
row-reverse与row相同，但以相反顺序←
column元素将垂直显示，正如一个一列一样↓
column-reverse与column相同，但以相反顺序↑

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

flex-start默认值，从头部开始，如果主轴是X轴由左到右
flex-end从尾部开始排列
center在主轴居中对齐，如果主轴是X轴，水平居中
space-around平分剩余空间
space-between先两边贴边，再平分剩余空间

注：使用这个元素之前一定要确定好主轴是哪个

三、flex-wrap:设置子元素是否换行

nowrap默认换行
wrap规定元素在必要时候拆行或拆列
wrap-reverse规定元素在必要时候拆行或拆列，但以相反顺序

注：默认情况下，项目排在一条线上。

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

flex-start元素从上到下
flex-end元素从下到上
center挤在一起居中
stretch

默认值，元素被拉伸以适应容器

（要将高度宽度去掉，要记得变轴）

注：该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项（单行）的时候用。

五、align-content:设置侧轴上的子元素排列方式（多行）

flex-start元素在侧轴的头部开始排列
flex-end元素在侧轴的尾部开始排列
center侧轴中间显示
space-around平分剩余空间
space-between先两边贴边，再平分剩余空间
stretch默认值，元素被拉伸以适应容器

注：设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

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

更多推荐

菜鸟笔记十一：flex布局