详解CSS3弹性盒模型

弹性盒模型是CSS3规范中提出的一种新的布局方式。弹性盒模型的目的是提供一种更加高效、简洁的方式来对容器中的元素进行布局、对齐和分配富余空间，即使它们的大小是未知或者动态变化的。利用弹性盒模型的新特性可以让我们告别元素浮动、定位，完美实现元素的垂直水平居中。由于弹性盒模型是在2009年提出的，目前它已经得到了所有标准浏览器的支持，所以我们可以尝试一下这种新的布局方式。

下面，笔者将详细解读一下弹性盒模型(此处指新版弹性盒模型——display: flex;)。

值得我们注意的是：Flexbox是布局模块，而不是一个简单的属性，它包含了父元素属性和子元素属性。

任何一个容器都可以指定为如下的Flex布局，它其实是对display的一种扩展。同block和inline-block一样，弹性盒模型也分为两种，即：flex和inline-flex。

E {
    dispaly: flex | inline-flex;
}

注意：容器设置成Flex布局以后，子元素的float、clear和vertical-align属性将失效，position属性依然有效。

我们将设置成flex属性的元素称为容器，它的子元素称为项目。当一个元素被转成弹性盒模型后，它便有了主轴和交叉轴。

flex-direction
主轴的方向(即项目的排列方向)

E {
    flex-direction: row;
}

row(默认值)：水平方向，起点在左端。

row-reverse：水平方向，起点在右端。

column：垂直方向，起点在顶端。

column-reverse：垂直方向，起点在底端。

flex-wrap
项目是否都在一个主轴上

E {
    flex-wrap: nowrap;
}

nowrap(默认值)：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

flex-flow
flex-direction属性和flex-wrap属性的简写形式

E {
    flex-flow: row nowrap;
}

注：默认值为row nowrap，其它取值同flex-direction和flex-wrap。

justify-content
项目在主轴上的对齐方式

E {
    justify-content: flex-start;
}

flex-start(默认值)：左对齐，富余空间位于所有元素右侧。

flex-end：右对齐，富余空间位于所有元素左侧。

center：居中，富余空间位于所有元素两侧。

space-between：两端对齐，项目之间的间隔都相等，富余空间位于除两端元素之外每个元素的两侧。

space-around：等分对齐，富余空间平均分配并位于每个元素的两侧。

align-items
项目在交叉轴上如何对齐

E {
    align-items: stretch;
}

stretch(默认值)：如果项目未设置高度或设为auto，则占满整个容器的高度。

flex-start：交叉轴的起点对齐，富余空间位于交叉轴的终点那侧。

flex-end：交叉轴的终点对齐，富余空间位于交叉轴的起点那侧。

center：交叉轴的中点对齐，富余空间位于交叉轴的两侧。

baseline：项目第一行文字的基线对齐，富余空间位于交叉轴的两侧或一侧。

align-content
多根轴线的对齐方式

E {
    align-content: stretch;
}

stretch(默认值)：轴线占满整个交叉轴。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间距相等。

注：如果项目只有一根轴线，该属性不起作用。

order
项目的排列顺序

E F {
    order: 0;
}

注：默认值是0，取值为整数，数值越小，排列越靠前。

flex-grow
项目的扩展比例

E F {
    flex-grow: 0;
}

注：默认值是0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。计算公式为：原来width + 剩余空间 * (项目flex-grow值 / 项目flex-grow值总和)

flex-shrink
项目的缩小比例

E F {
    flex-shrink: 1;
}

注：默认值是1，即如果空间不足，该项目将缩小。如果所有项目都没有显示定义该属性，当空间不足时，都将等比例缩小。如果不想让某项，在空间不足时缩小，可将flex-shrink设置为0。

flex-basis
分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间

E F {
    flex-basis: auto;
}

注：默认值是auto，宽度设置为auto时，盒子的宽度取决元素设置的宽度。

flex
flex-grow属性、flex-shrink属性和flex-basis的简写

E F {
    flex: 0 1 auto;
}

注：默认值为0 1 auto，后两个属性可选。该属性有两个快捷值：auto等价(1 1 auto)和none等价(0 0 auto)。

align-self
单个项目的对齐方式，可覆盖align-items属性

E F {
    align-self: auto;
}

auto(默认值)：元素继承父容器的align-items属性，如果没有父容器则为stretch。

stretch：如果项目未设置高度或设为auto，则占满整个容器的高度。

flex-start：交叉轴的起点对齐，富余空间位于交叉轴的终点那侧。

flex-end：交叉轴的终点对齐，富余空间位于交叉轴的起点那侧。

center：交叉轴的中点对齐，富余空间位于交叉轴的两侧。

baseline：项目第一行文字的基线对齐，富余空间位于交叉轴的两侧或一侧。