Method to realize height adaptation of unknown height parent container and its left and right child containers_html/css_WEB-ITnose

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

You need to realize that one of the two sub-containers is automatically equal in height based on the height of the other. At the same time, the parent container is also automatically equal in height. The width can be adaptive or according to the height of the other. Need to be allocated.

The two solutions I have learned so far are to use flexbox, and the other is to use table and table-cell, both of which are explained below.

//---The following is reprinted content about flexbox

1. Flexbox

Flexbox usually allows us to better operate its sub-systems Element layout, for example:

1. If the element container does not have enough space, we can set them on the same line without calculating the width of each element;
2. can quickly layout them In one column;
3. can easily align them to the left, right, middle, etc. of the container;
4. You can change their display order without modifying the structure;
5. If the element container is set Percentage and viewport size changes don't have to worry about breaking the layout by not specifying the exact width of the element, because each child element in the container can be automatically assigned a proportion of the container's width or height.

Sounds pretty useful, doesn't it? Let's explore it in more detail next.

Currently supports browsers : Opera Mobile12.1, Opera12.5, Firefox18 (partial) and chrome. Chrome needs to add the browser prefix "-webkit-". Opera supports standard syntax without adding any prefix. Firefox has partial support, and you also need to add the prefix "-moz-" and set a flag (enter: about:config in the address bar of the Firefox browser, search for "flexbox", and double-click "layout.css.flexbox.enabled" after finding it) ", set his "value" value to "true"). Note that other browsers except Opera use old syntax rules since it supported flexbox in 2009, and you really should not use these outdated syntaxes.

Flexbox terminology

Before reading this article in detail, it is necessary for us to understand several common terms of flexbox, which will help everyone understand the following.

1. Flex container: An element with "display:flex" or "display:inline-flex"
2. Flex item: Child elements of the flex container
3. Main axis, main axis direction: The user agent configures the scalable items along the main axis of a flex container, and the main axis is the extension of the main axis direction.
4. Spindle starting point, spindle end point: The configuration of the scalable project starts from the main axis starting edge of the container and ends at the main axis end edge.
5. Main axis length, main axis length attributes: The width or height of the telescopic item in the main axis direction is the main axis length of the item. The main axis length attribute of the telescopic item is the width or height attribute, which one is determined by Determine the direction facing the main axis.
6. Side axis, side axis direction: The axis perpendicular to the main axis is called the side axis, which is an extension of the side axis direction.
7. Cross-axis start point, cross-axis end point: The configuration of the flex row filled with items starts from the cross-axis starting edge of the container and ends at the cross-axis end point.
8. Cross-axis length, cross-axis length attributes: The width or height of the flex item in the cross-axis direction is the cross-axis length of the item, and the cross-axis length attribute of the flex item is "width" or "height" attribute, whichever is facing the cross-axis direction.

The following picture is a schematic diagram of various direction and size terms in a row scalable container:

The above picture and terminology introduction come from: http:// www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans

?? desert

Get started Flexbox

How do we start using Flexbox? Most Flexbox properties apply to elements in the parent container. Because of Flexbox, you can specify a container that you want to specify, using a special value display attribute, like this:

footer { display: flex; } 

Next you can specify the child elements using the "flex-row" attribute Whether the layout is displayed in a row or a column. If you want, you can define the keyword "wrap" to specify that the content container is on a new line (when the parent element container is too small and the flexbox element wants to be displayed on the same line). In our example, I set "row wrap" in the footer

footer { display: flex; <strong>flex-flow: row wrap;</strong> } 

About flex-flow

flex-flow is used to stretch rows and wrap, flex-flow attribute It is the abbreviation for setting the "flex-direction (direction of the scalable flow)" and "flex-wrap (flexible line wrap)" properties at the same time. The two properties determine the main axis and side axis of the scalable container. This property mainly applies to scalable containers. In the example of this article, it is mainly the "footer" element.

About flex-direction

The flex-direction attribute can be used to set the direction of the main axis of the flex container, which also determines the direction in which the user agent configures the flex item. Mainly suitable for scalable containers, it mainly includes the following values:

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; <strong>align-items: stretch;</strong> } 

上图是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; <strong>justify-content: space-around;</strong> } 

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

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」各关键字对多行的伸缩容器的效果。

改变元素布局的顺序

传统上不改变元素的结构要改变元素的布局顺序一直是一个痛苦的事情。不过在Flexbox中，你可以通过“order”属性来修改伸缩项目的布局顺序（在不调整结构前提之下）。这个属性一直接受的整数值??称为系数集??也称为排序组，会出现在伸缩项目中。拿前面的例子来说，默认情况链接块是第二个子元素，如下图所示：

默认情况footer子元素排序是：contact、links、copyright。

默认情况之下，所有的伸缩项目的顺序组都是“0”。我们可以很容易的给每个伸缩项目设置不同的顺序值。更高的值会排在后面，而原来的HTML结构并不会有任何变化。所以在我的示例中，我将链接块设置了order值为“1”

#second { order: 1; } 

页脚已做出新的排序：contact、copright、links。

关于order

order属性是用来设置伸缩项的显示顺序，默认状态下，用户代理会用伸缩项目出现在源文档的次序配置这些伸缩项目。order属性透过将元素分到有序号的组以控制元素出现的顺序。在伸缩布局中，order属性控制伸缩项目在伸缩容器里的顺序。

order取值越大，越排在后面。并且order可以取负值。

??大漠

使你的元素具有弹性

Flexbox最强大的特性是能够通过“flex-flow”属性设置伸缩项目的流动方向，或者可以通过“flex”属性设置一个可用的空间。它的取值可以有三个部分（flex-grow、flex-shrink、flex-basis）。让我们一个一个来尝试，看看他们的影响。首先添加的是“flex-grow”:

#first { flex: 1; } #second { flex: 1; } #third { flex: 1; } 

这些没单位的值是作为一个比例，他们决定于伸缩容器中有多少个伸缩项目。可以决定伸缩项目在伸缩容器中的空间大小。如果每个都设置为1，每个伸缩项目在伸缩容器内都相等。如果你给其中一个伸缩项目设置为2，那么这个伸缩项目会占用空间是其他伸缩项目的两倍。

#first { flex: 1; } #second { flex: 2; } #third { flex: 1; } 

你也可以像下面一样设置flex-basis的值：

#first { flex: 1 200px; } #second { flex: 2 300px; } #third { flex: 1 250px; } 

首先flex-basis的值主要取决于伸缩项目的width或者高，同时取决于流动方向。然后，剩下的空间根据flex-grow给伸缩项目最后宽度来划分。所以伸缩项目会沿着主轴线大小为200px、300px和250px,总共750px。如果伸缩容器沿主轴方向是950px,这样就会多出一个200px空间，那么这多出的200px空间将分配给伸缩项目。第一个和第三个伸缩项目将得到50px的空间，因为他的flex-grow值是“1”,他们最终的空间是250px和300px。第二个伸缩项目将获得100px空间，因为他的flex-grow值为“2”,他的最后空间大小为400px。

flex的第三部分很少使用，但我们可以看看他的使用方法，你也可以将flex-shrink像下面那样设置：

#first { flex: 1 1 400px; } #second { flex: 2 3 600px; } #third { flex: 1 2 400px; } 

flex-shrink称为收缩比率。这个值只有伸缩项目在没主轴方向溢出伸缩容器才会发挥作用。他们充当比例值，但这回指的是溢出量，将这个溢出量按比例分配给每个伸缩项目，用于防止伸缩容器溢出。

比如说，我们伸缩容器沿主轴方向宽度是1100px，按照上面的示例代码计算，我们的伸缩项目会超出300px(伸缩项目沿主轴方向总值为1400px)，这个时候通过flex-shrink收缩他们：

1. 第一个伸缩项目将得到溢出量的六分之一，也就是50px，这个时候他的值为350px(在当初的基础上减少50px)。
2. 第二个伸缩项目将得到溢出量的六分之三，也就是150px，这个时候他的值为450px(在当初的基础上减少150px)。
3. 第三个伸缩项目将得到溢出的六分之二，就就是100px，这个时候他的值为300px(在当初的基础 上减少100px)。

这样flex-shrink使用伸缩项目得到一个较小的宽度。

我的例子中最终将值设置成：

#first { flex: 1 0 7rem; } #second { order: 1; flex: 2 0 8rem; } #third { flex: 1.5 0 7rem; } 

关于flex

flex用来决定伸缩项目的伸缩性。一个伸缩容器会等比地按照各伸缩项目的扩展比率分配剩余空间，也会按照收缩比率缩小各项目以避免溢出。

flex属性可以用来指定伸缩长度的部件：扩展比率flex-grow，收缩比率flex-shrink以及伸缩基准值flex-basis。当一个元素是伸缩项目时，flex属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目，则flex属性没有效果。

1. flex-grow：此属性值为正数值，用来设置扩展比率，也就是剩余空间是正值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例。若省略则会被设置为“1”。
2. flex-shrink：此属性值为正数值，用来设置收缩比率，也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例。若省略则会被设置为“1”，在收缩的时候收缩比率会以伸缩基准值加权。
3. flex-basis：与width属性使用相同的值，可以用来设置flex-basis长写并指定伸缩基准值，也就是根据可伸缩比率计算 出剩余空间的分布之前，伸缩项目主轴长度的起始数值。若在flex缩写省略了此属性设置，则flex-basis的指定值是“0”，若flex-basis的指定值是“auto”，则伸缩基准值的指定值是元素主轴长度属性的值。

上图是一个显示「绝对」伸缩（以零为基准值开始）与「相对」伸缩（以项目的内容大小为基准值开始）差异的图解。这三个项目的伸缩比例分别是「1」、「1」、「2」。

??大漠

Flexbox：响应式趋势

在我的例子中结合一个多行flxbox(flex-flow:row wrap)和伸缩长度flex（如:flex:1 0 7rem）以及媒体查询实现了一个完美的效果。在不同视窗宽度下，伸缩项目在伸缩容器中可以平滑的进行变化。如图所示：

flexbox对应的响应式代码：

footer { display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-items: stretch; display: -moz-flex; -moz-flex-flow: row wrap; -moz-align-items: stretch; display: -ms-flex; -ms-flex-flow: row wrap; -ms-align-items: stretch; display: flex; flex-flow: row wrap; align-items: stretch; } #first { -webkit-flex: 1 0 7rem; -moz-flex: 1 0 7rem; -ms-flex: 1 0 7rem; flex: 1 0 7rem; } #second { -webkit-order: 1; -webkit-flex: 2 0 8rem; -moz-order: 1; -moz-flex: 2 0 8rem; -ms-order: 1; -ms-flex: 2 0 8rem; order: 1; flex: 2 0 8rem; } #third { -webkit-flex: 1.5 0 7rem; -moz-flex: 1.5 0 7rem; -ms-flex: 1.5 0 7rem; flex: 1.5 0 7rem; } @media screen and (max-width: 1000px) { body { width: 100%; } #fixed { left: 0%; right: 0%; } } @media screen and (max-width: 520px) { #fixed { position: static; } section { padding: 1rem 2rem; } body { padding-bottom: 0; background-image: none; background-color: white; } footer { padding: 0 1rem 0; } #first { -webkit-flex: 1 0 10rem; -moz-flex: 1 0 10rem; -ms-flex: 1 0 10rem; flex: 1 0 10rem; } #second { -webkit-flex: 1 0 10rem; -moz-flex: 1 0 10rem; -ms-flex: 1 0 10rem; flex: 1 0 10rem; } #third { -webkit-flex: 1 0 10rem; -moz-flex: 1 0 10rem; -ms-flex: 1 0 10rem; flex: 1 0 10rem; } } @media screen and (max-width: 380px) { section { padding: 1rem 1rem; } footer div { right: 1rem; } } 

flex:auto和flex:initial

flex还有其他的值，Common values of flex做了详细的介绍。其中“auto”和“initial”非常有用。设置“flex:auto”时，伸缩容器中的伸缩项目（相当于flex: 1 1 auto）将使用其大小根据任何width/height或者min-width/min-height设定，它将扩展占用一个比例的任何自由空间可用，但在没有额外的自由空间将缩小以适应其内容。结合min-width将可能会产生一些有趣的效果，可以看看flex auto的实例。在这个实例中，父容器设置了“flex-flow:row”，三个子元素设置了“flex:auto”并设置了一个“min-width”。因此不管是多行还是单行，任何多余的空间都扩展到伸缩项目上。然后会收缩整齐，因为他变小后，充许子元素重新自适应。

试着将“flex:auto”修改成“flex:initial”(相当于flex:0 1 auto)，你会看到，当有多余的空间时，第三个子元素安容器大小不再增加，但仍然需要收缩。

优雅降级

Flexbox是一个全新的布局模块，不识别浏览器将会忽略他。这样看起来是一个破坏者，阻止你使用它。然而，它不需要。例如，你可以使用浮动或者表格在桌面系统下布局你的网站,在小屏幕下选择使用flexbox,或许只是为了移动主要内容。

如果你在使用flexbox之前将页面所有元素（比如：nav、header、footer等）设置成“display:block”，在支持flexbox的浏览器会将内容自动伸缩，以适应整个设备的宽度。在不识别flexbox的浏览器中会按顺序整块的排列，但并不会影响你的阅读。

或者，表格可以把一个元素从源秩序让内容从开始到结束的排列。看到这样的例子，你可能会笑的。

总结

我希望这篇文章可以告诉你使用浮动和清除浮动，这些呆会的布局技术是如何的可怕，同时也明确的告诉你flexbox是如何的有用。你也可以看看媒体查询与flexbox结合实现响应式布局是多么的伟大。

以上转自http://www.w3cplus.com/css3/flexbox-basics.html

二、使用 table和table-cell

从前在页面布局的时候，table被大量的使用，其中一个好处便是元素可以轻松的定位，不会出现什么窜行的问题。你要是用div的话，一会inline一会float很是蛮烦。怎么样才能在使用div的时候也能享受的table定位的好处呢？下面举个例子：

代码如下:

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

一个父容器，装有两个子容器，在content-1宽度不确定的情况下，如何让content-2填充满父容器呢？可以这样： 

.container{

width: 90%;
margin: 50px auto;
border: #333333 solid 1px;
padding: 10px;
display: table;
}
.content- 1{
height: 50px;
background: #f30;
width: 35%;
display: table-cell;
}
.content-2{
height : 50px;
background: #03f;
display: table-cell;
}

Specify the display of the parent container as table, so that the browser will treat parent as Treat it as a table, and then add elements to the table. The effect of the elements will be the same as using the td tag directly.

Rendering: