主要是总结阮一峰老师的教程，加深自己的印象。
基本概念
- flex容器：采用flex布局的元素称为flex容器。
-
flex项目：flex容器的所有子元素都称为容器成员，即flex项目，简称项目。
容器默认有两根轴，水平的主轴和垂直的交叉轴。
容器的属性
-
flex-direction：
决定主轴的方向
- row(默认值): 从左到右
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上
-
flex-wrap：
定义如果一行轴线排不下，如何换行
- nowrap(默认): 不换行
- wrap：换行，第一行在上方
- wrap-reverse: 换行，第一行在下方
-
flex-flow
flex-direction和flex-wrap属性的简写形式
- <flex-direction> || <flex-wrap>
-
justify-content:
定义了项目在主轴上的对齐方式
- flex-start(默认): 左对齐(主轴的起点)
- flex-end: 右对齐(主轴的终点)
- center: 居中
- space-between: 两端对齐，项目之间间隔相等
- space-around: 每个项目两侧的间隔相等。即项目之间的间隔比项目与边框的间隔大一倍。
-
align-items：
定义项目在交叉轴上如何对齐
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：居中
- baseline：项目的第一行文字的基线对齐
- stretch(默认): 如果项目未设置高度或者设置为auto，将占满整个容器的高度
-
align-content
定义了多跟轴线的对齐方式。如果项目只有一个轴线，则该属性不起作用。
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch
注意：align-content只对多行的flex容器起作用。
align-content&align-items
项目的属性
-
order
定义项目的排列顺序。数值越小，排列越靠前，默认为0
-
flex-grow
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
-
flex-shrink
定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
-
flex-basis
定义在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间，默认为auto,即项目本来的大小。
可以设为跟width或height属性一样的值
-
flex
flex-grow,flex-shrink,flex-basis的简写
none | [ <flex-grow> <flex-shrink> ? || <flex-basis>]
有两个快捷键：
- auto(1 1 auto)
- none(0 0 auto)
-
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
