css flexbox 学习笔记（一）

flex布局又叫做弹性布局，任何一个容器都可以定义为flex布局，和以前的用盒模型实现的布局相比更加易用，灵活。

.box{
    display:flex;
}
.box{
    display:inline-flex;
}

注：使用flex布局后，子元素的float,clear和vertical-align会失效

采用flex布局的元素，称为flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称”项目”。

容器的属性

1. flex-direction:决定项目排列的方向
   a. row 水平,起点在左端
   b. row-reverse 水平反转，起点在右端
   c. column 垂直，起点在顶部
   d. column-reverse 垂直反转，起点在底部
   
2. flex-wrap:决定是否换行
   a. warp:换行,第一行在上方
   b. nowarp:不换行
   c. warp-reverse:换行，第一行在下方
   3.justify-content:定义项目在水平轴的对其方式
   a. flex-start:左对齐
   b. flex-end:右对齐
   c. center:居中
   d. space-between:两端对齐
   e. space-around:每个项目两端距离相等
   
   4.align-items:垂直方向的对其方式
   a. flex-start:顶部对齐
   b. flex-end: 底部对齐
   c. center:垂直居中
   d. baseline:项目第一行文本对齐
   e. stretch:如果项目未设置高度，将沾满整个容器高度
   
   5.align-content:多根轴线的对齐方式，如果只有一根则不起作用，就是在容器中有多行的情况。
   a. flex-start:顶部对齐
   b. flex-end:底部对齐、
   c. center:居中
   d. space-between:上下两端对齐
   e. space-around:每一行两端距离相等
   
3. flex-flow:是flex-direction属性和flex-wrap属性的简写形式

项目的属性

1. order:项目排列顺序，数值越小越靠前
2. flex-grow:项目的放大比例，默认为0，即使有剩余空间也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
   
3. flex-shrink:项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
   
4. flex-basis:项目的宽度属性，默认为自动。可设置为定值
5. align-self:项目的对其方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
6. flex:flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。

有了flex布局，去实现垂直居中，宽度自适应等一系列布局就会十分容易。

原文链接：阮一峰flex布局教程