实现未知高度父容器及其左右排列子容器的高度自适应的办法

1 <div class="container">2     <div class="content-1">未知高度和宽度的内容</div>3     <div class="content-2">未知高度和宽度内容</div>4 </div>

需要实现两个子容器中一个依据另外一个的高度而自动等高，同时父容器也是同样自动等高，宽度可以自适应或者按需分配。

目前我学习到的两种解决办法一种是利用flexbox，另外一种是利用table和table-cell，下文均有解释。

//---以下关于flexbox为转载内容

一、Flexbox

Flexbox通常能让我们更好的操作他的子元素布局，例如：

1. 如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；
2. 可以快速让他们布局在一列；
3. 可以方便让他们对齐容器的左、右、中间等；
4. 无需修改结构就可以改变他们的显示顺序；
5. 如果元素容器设置百分比和视窗大小改变，不用提心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

听起来相当有用，不是吗？接下来让我们更详细的探索它。

目前支持浏览器：Opera Mobile12.1+、Opera12.5+、Firefox18+（partial）和Chrome。Chrome需要添加浏览器前缀“-webkit-”,Opera支持标准语法，不用添加任何前缀。Firefox有部分支持，也需要添加前缀“-moz-”，同时需要设置一个标志（到firefox浏览器地址栏中输入：about:config，搜索“flexbox”，找到之后双击“layout.CSS.flexbox.enabled”，设置他的“value”值为“true”）。注意，其他浏览器除了opera自2009年支持flexbox以来，都使用旧的语法规则，真的不应该使用这些过时的语法。

flexbox的术语

在详细阅读这篇文章之前，我们很有必要先了解flexbox的几个常用术语，这样有助于大家对后文的理解。

1. 伸缩容器：一个设有“display:flex”或“display:inline-flex”的元素
2. 伸缩项目：伸缩容器的子元素
3. 主轴、主轴方向：用户代理沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。
4. 主轴起点、主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。
5. 主轴长度、主轴长度属性：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
6. 侧轴、侧轴方向：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
7. 侧轴起点、侧轴终点：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
8. 侧轴长度、侧轴长度属性：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。

下图是一个row伸缩容器中各种方向与大小术语的示意图：

上图以及术语介绍来自于：http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans

——大漠

开始使用Flexbox

我们如何开始使用Flexbox呢？大多数的Flexbox属性都应用于父容器的元素上。因为Flexbox，你可以指定你想要制定的一个容器，使用一个特殊的值显示属性，就像这样：

footer {  display: flex;}

接下来你可以使用“flex-row”属性来指定子元素布局是在一行还是一列显示。如果你愿意，你可以定义关键词“wrap”，来指定内容容器在新的一行（当父元素容器太小，flexbox元素想在同一行显示）。在我们的例子中，我在footer中设置了“row wrap”

footer {  display: flex;  flex-flow: row wrap;}

有关于flex-flow

flex-flow是用来伸缩行换行，flex-flow属性是同时设定“flex-direction(伸缩流的方向)”和“flex-wrap（伸缩行换行）”属性的缩写，两个属性决定了伸缩容器的主轴与侧轴。此属性主要适用于伸缩容器。在这篇文章的例子中，主要是“footer”元素。

有关于flex-direction

flex-direction属性可以用来设定伸缩容器的主轴的方向，这也决定了用户代理配置伸缩项目的方向。主要适用于伸缩容器，主要包括以下几个值：

1. row:flex-direction的默认值，表示伸缩容器的主轴与当前书写模式的行内轴（文字布局的主要主向）。主轴起点与主轴终点方向分别等同于当前书写模式的始与结方向。
2. row-reverse：表示的是除了主轴起点与主轴终点方向交换以外同row属性值的作用。
3. column：表示的是伸缩容器的主轴与当前书写模式的块轴（块布局的主要方向）同向。主轴起点与主轴终点方向分别等同于当前书写模式的前与后方向。简单的可以理解为列布局。
4. column-reverse：表示的是除了主轴起点与主轴终点方向交换以外同“column”的属性值作用。

关于flex-wrap

flex-wrap属性主要用来控制伸缩容器是单行还是多行，也决定了侧轴方向一新的一行的堆放方向。主要适用于伸缩容器，主要包括以下几个值：

1. nowrap:flex-wrap的默认值，表示的是伸缩容器为单行。侧轴起点方向等同于当前书写模式的起点或前/头在侧轴的那一边，而侧轴终点方向是侧轴起点的相反方向。
2. wrap：表示的是伸缩容器为多行。侧轴起点方向等同于当前书写模式的起眯或前/头在侧轴的那一边，而侧轴终点方向是侧轴起点的相反方向。
3. wrap-reverse：除了侧轴起点与侧轴终点方向交换以外同wrap所起作用相同。

注：以上内容来自于Css3-flexbox/zh-hans

——大漠

关键词“wrap”明显的变得很有意义。

注：“flex-flow”在这里采用了缩写，他主要包括两个属性“flex-direction”(值为row、column、row-reverse和column-reverse，后面的两个属性值与row和column方向相反)和“flex-wrap”（值为：wrap、no-wrap和wrap-reverse）。

主轴和侧轴

如果你要想flexbox工作正常，你有些概念必须得清楚，比如说让flexbox正常工作的主轴和侧轴，他们看上去有点像X轴和Y轴，但还是有所差别的。主轴的方向主要是用来确定flex的主方向，所以你子元素要么放置在一行，要么放置在一列。侧轴主要垂直于主轴运行，如下图所示：

flexbox的主轴与侧轴

设置flexbox子元素（伸缩项目）的对齐

Flexbox有一系列的方法来帮助你调整伸缩项目沿着主轴和侧轴的对齐。

侧轴对齐伸缩项目——align-items

第一个我们一起看看“align-items”属性，它充许您调整伸缩项目在侧轴的对齐方式，主要包括以下几个值：

1. flex-start/baseline：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。
2. flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
3. center：伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。
4. stretch：伸缩项目拉伸，填满整个侧轴

关于align-items

可以用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式。

为了更形像的理解"align-items"各个属性值对应在侧轴上的效果，可以参考下图：

——大漠

这些都是术语解释，只有动手去尝试，调整不同的值，才能知道各个属性值所代表的运行效果，大家可以看看下图所运行的效果。对于这个例子，我采用的是“stretch”属性值。

footer {  display: flex;  flex-flow: row wrap;  align-items: stretch;}

上图是align-items各个属性值运行后的效果，从上至下依次是：flex-start、center、flex-and和stretch。

往往所有列表项的内容无法填满父元素的整个高度，特别是在不知道宽度和高度的视窗变化之下。很多情况之下为了让这些列实现等高效果，是一件多么可怕的事情，而且很多时间都浪费在一些呆反的解决方案和处理兼容上，比如说设置一个等高的效果，使用假的列？

如果你执着于等高的解决方案，你不仿移步看看这篇教程《八种创建等高列布局》。

——大漠

主轴对齐伸缩项目——justify-content

还有一个主要属性“justify-content”使用的也比较多，这个属性主要用来设置伸缩项目沿主轴的对齐方式，从而调整伸缩项目之间的间距。设置了这个属性，在主轴方向上设置的任何margin都不会起作用。因此我特意创建了一个例子来证明这点。

在这个例子中，我为伸缩项目设置了一个百分比宽度：

#first {  width: 25%;}    #second {  width: 40%;}      #third {  width: 25%;}

然后在伸缩容器设置了一个值，证明伸缩项目在主轴方向的margin不起作用：

footer {  display: flex;  flex-flow: row wrap;  align-items: stretch;  justify-content: space-around;}

这个值相当的不错，伸缩项目会平均地分布在行里，两端保留一半的空间。其他可用的值如下：

1. flex-start：伸缩项目向一行的起始位置靠齐。该行的第一个伸缩项目在主轴起点边的外边距与该行在主轴起点的边对齐，同时所有后续的伸缩项目与其前一个项目对齐。
2. flex-end：伸缩项目向一行的结束位置靠齐。该行的最后一个伸缩项目在主轴终点边的外边距与该行在主轴终点的边对齐，同时所有前面的伸缩项目与其后一个项目对齐。
3. center：伸缩项目向一行的中间位置靠齐。该行的伸缩项目将相互对齐并在行中居中对齐，同时第一个项目与该行的在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离（如果剩余空间是负数，则保持两端溢出的长度相等）。
4. space-between：伸缩项目会平均地分布在一行里。如果剩余空间是负数，或该行只有一个伸缩项目，则此值等效于「flex-start」。在其它情况下，第一个项目在主轴起点边的外边距会与该行在主轴起点的边对齐，同时最后一个项目在主轴终点边的外边距与该行在主轴终点的边对齐，而剩下的伸缩项目在确保两两之间的空白空间相等下平均分布。

通过伸缩容器中的三个不同颜色的项目，展示五种「justify-content」关键字的效果。

你也可以在实例中自己动手尝试一下，这几个值给伸缩项目在主轴上会带来什么样的变化，下图是示例中五种不同属性值效果的截图：

上图是“justify-content”五种属性值的效果，从上到下依次是：flex-start、center、flex-end、space-between和space-around。

伸缩项目堆栈伸缩行——align-content

您还可以调准伸缩行在伸缩容器里的对齐方式。不过他会更改flex-wrap的行为，比如说：“wrap”。align-content和align-items相似，但是不是对齐伸缩项目，它对齐的是伸缩行，其主要包括以下几个值：

1. flex-start：各行向伸缩容器的起点位置堆叠。伸缩容器中第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点的边，之后的每一行都紧靠住前面一行。
2. flex-end：各行向伸缩容器的结束位置堆叠。伸缩容器中最后一行在侧轴终点的边会紧靠住该伸缩容器在侧轴终点的边，之前的每一行都紧靠住后面一行。
3. center：各行向伸缩容器的中间位置堆叠。各行两两紧靠住同时在伸缩容器中居中对齐，保持伸缩容器在侧轴起点边的内容边和第一行之间的距离与该容器在侧轴终点边的内容边与第最后一行之间的距离相等。（如果剩下的空间是负数，则行的堆叠会向两个方向溢出的相等距离。）
4. space-between：各行在伸缩容器中平均分布。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于「flex-start」。在其它情况下，第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点边的内容边，最后一行在侧轴终点的边会紧靠住伸缩容器在侧轴终点的内容边，剩余的行在保持两两之间的空间相等的状况下排列。
5. space-around：各行在伸缩容器中平均分布，在两边各有一半的空间。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于「center」。在其它情况下，各行会在保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半的状况下排列。
6. stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于「flex-start」。在其它情况下，剩余空间被所有行平分，扩大各行的侧轴尺寸。

align-content」各关键字对多行的伸缩