Flexbox Layout Module

在flex属性（以及对应的flexbox layout排版方式）出现之前，一般使用position、display、float等等属性组织页面的layout。而flexbox layout是一种更加responsive的layout方式。

flex box demos：www.w3schools.com/css/css3_fl…

flex container

为了实现flexbox layout的页面排版方式，首先需要在最外层容器上设置display: flex

.flex-container {
  display: flex;
}

然后对flex container使用下面这些属性，设定具体flex的逻辑

• flex-direction：往哪个方向上摆放flex items
• flex-wrap：决定单行还是多行，并且决定新行的堆叠方向。默认情况下是nowrap，此时会把flex items强行堆叠在一行当中
• flex-flow：上述两个property的shorthand
• justify-content：给flex items横向排版，比如可以实现居中
• align-items：也是用来给flex item排版，但是是纵向的
• align-content：是用来排版flex lines的，只有在多行的情况下有用。比如可以实现两行flex items一个贴在container上沿，一个贴在其下沿

PS：flex item是指flex container的直接孩子

flex item

flex item常常需要设置：

• order：item所应该出现的顺序
• flex-grow：在空间有多余时，item在剩余空间上增量份数
• flex-shrink：在空间不足时，item在仅有空间上压缩的份数
• flex-basis：item的初始长度
• flex：上面3个的shorthand
• align-self：用于覆盖flex container的align-items用的，仅规定自己这个flex item的align表现

PS：flex-grow、flex-shrink、flex-basis在使用时有一套公式，稍微有些麻烦。