菜鸟笔记十一：flex布局

一、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来表示占多少份数