CSS知识点整理--flex布局

记录一下flex布局的知识点
flex布局的属性设置分成两个部分，一个是针对容器进行设置的，一个是针对容器里的项目进行设置的。

容器的属性有如下6个：

1. flex-direction（设置主轴方向）
   有4个常用的设置值：
   row(默认) | row-reverse | column | column-reverse
   row(默认) | row-reverse -> 设置主轴为水平方向，前者起点为左端，后者起点为右端
   column | column-reverse -> 设置主轴为垂直方向，前者起点为左端，后者起点为右端

2. flex-wrap（设置换行）
   有3个常用的设置值：
   nowrap(默认) | wrap | wrap-reverse
   nowrap ->不换行
   wrap -> 换行，第一行在上
   wrap-reverse -> 换行，第一行在下

3. flex-flow（是上面两个属性的组合属性）
   flex-flow: flex-direction,flex-wrap

4. justify-content（设置主轴对齐方式）
   有6个常用的设置值：
   flex-start | flex-end | center | space-around | space-between
   flex-start 根据主轴方向起点对齐
   flex-end 根据主轴方向终点对齐
   center 居中对齐
   space-around 项目与项目之间间隔是项目与边界间隔的2倍
   space-between 两端对齐，两端之间项目间隔相等
   space-evenly 项目之间和项目与边界的间隔都相等

5. align-items（设置交叉轴对齐方式）
   有5个常用的设置值
   flex-start | flex-end | center | baseline | stretch
   baseline 项目的第一行文字的基线对齐
   stretch 如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content（设置多根轴线对齐方式，只有一根轴线时该属性无效）
   有6个常用的设置值
   flex-start | flex-end | center | space-around | space-between | baseline

容器项目的属性有如下6个：

• order（设置项目排列顺序，默认为0，越小越靠前排列）
• flex-grow（根据可用空间放大项目，默认为0，不放大）
• flex-shrink（根据可用空间缩小项目，默认为0，不缩小）
• flex-basis（没有设置宽高时设置与width和height一样的值，默认auto）
• flex: flex-grow,flex-shrink,flex-basis（组合属性）
• align-self（设置单个项目与其它项目不一样的对齐方式，可覆盖align-items属性，默认auto）
  常用的设置值如下：
  auto | flex-start | flex-end | center | baseline | stretch

注意：Webkit 内核的浏览器，必须加上-webkit前缀。