Html flexbox容器不会覆盖封装的孩子 [英] Html flexbox container does not expand over wrapped children

问题描述

我需要一个看起来有点类似于windows地铁开始屏幕与瓷砖的布局。为此，我尝试使用flexbox布局。但是遇到了一个问题，即如果父Flex容器包装到下一列，父容器不会环绕它。

I need to have a layout that looks somewhat similar to the windows metro start screen with tiles. To do so I try use flexbox layout. But have stuck with a problem that parent flex container does not wrap around its children if they are wrapped to the next column.

这里是示例fiddle： flex wrapping

Here is sample fiddle: flex wrapping

HTML：

<div class="top">
  <span class="middle">
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
  </span>
  <span class="middle">
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
  </span>
<div>

CSS：

.top
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: stretch;
    height: 400px;
    width:800px;
    background-color:gray;
}

.middle
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    justify-content: flex-start;
    background-color: blue;
    margin: 5px;
}

.bottom
{
    background: tomato;
    margin: 5px;
    width: 50px;
    height: 50px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

你看到我有父Flex容器。每行都由弹性容器组成，按列（.middle）包装其内容。问题是，中间的容器（蓝色的）不会环绕他们的孩子，移动到下一列。

As you see I have parent flex container that wraps by rows (.top). Each row is made up of flex containers that wrap its content by column (.middle). The problem is that middle containers (blue ones) do not wrap around their children that are moved to the next column.

我很感激任何建议。感谢。

I would appreciate any advice. Thanks.

推荐答案

添加

.middle
{
    height:99%;
}

解决了这个问题。

这篇关于Html flexbox容器不会覆盖封装的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！