如何使用 Flexbox 使元素覆盖容器中 100% 的可用空间？答案

【问题标题】：How to make the elements cover 100% of the space available in a container using Flexbox?如何使用 Flexbox 使元素覆盖容器中 100% 的可用空间？
【发布时间】：2019-07-08 16:34:54
【问题描述】：

我有 2 个容器，我试图让它们都具有相同的高度。我正在使用 flexbox 使用属性 flex-direction: column (flex-column) 来解决这个问题，但我不知道我做错了什么，所以每个元素都除以可用容器的高度。

.borde_gris_b{
  border-bottom:1px solid blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row p-0 m-0 m-auto justify-content-center">
     <!-- first container-->
      <div class="col-12 col-sm-6  col-md-6 col-lg-6  col-xl-4 p-0 m-0  text-center p-0  d-flex flex-column" style="border:1px solid red;">
        <div class="d-flex  borde_gris_b m-0">
            <div class="h-100 flex-center flex-column  w-100">
                <h6 class="p-0 mx-0 mb-1 mt-0 ">SNIES</h6>
                <p class="card-text p-0 m-0 "></p>
                <div class="card-text">12967</div>
            </div>
        </div>
        <div class="d-flex  borde_gris_b m-0">

            <div class="h-100 flex-center flex-column  w-100">
                <h6 class="p-0 mx-0 mb-1 mt-0 ">Duración</h6>
                <p class="card-text p-0 m-0 "> 10 periodos academicos </p>
            </div>
        </div>
  
        <div class="d-flex  borde_gris_b m-0">

            <div class="h-100 flex-center flex-column  w-100">
                <h6 class="p-0 mx-0 mb-1 mt-0 ">Número de Créditos</h6>
                <p class="card-text p-0 m-0 "> 170 </p>
            </div>
        </div>
        <div class="d-flex  borde_gris_b m-0">

            <div class="h-100 flex-center flex-column  w-100">
                <h6 class="p-0 mx-0 mb-1 mt-0 ">Modalidad de Formación</h6>
                <p class="card-text p-0 m-0 "> Presencial </p>
            </div>
        </div>
    </div>
    
    <!-- two container-->
    
    <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 p-0 m-0 ">
        <div class="row p-0 m-0">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 p-0 m-0  text-center p-0  d-flex flex-column" >
                <div class="d-flex  borde_gris_b m-0" >

                    <div class="h-100 flex-center flex-column  w-100">
                        <h6 class="p-0 mx-0 ">Becas</h6>
                        <p class="card-text p-0 m-0 "></p>
                        <div class="d-flex mb-1">
                            <div class="mr-3"> Beca Bien </div>
                            <div>

                                <p > $2,107,000 </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex  borde_gris_b m-0">

                    <div class="h-100 flex-center flex-column  w-100">
                        <h6 class="p-0 mx-0 mb-1 mt-0 ">Valor Matrícula</h6>
                        <p class="card-text p-0 m-0 "> $5,696,000 </p>
                    </div>
                </div>
  
                <div class="d-flex  borde_gris_b m-0">

                    <div class="h-100 flex-center flex-column  w-100">
                        <h6 class="p-0 mx-0 mb-1 mt-0 ">Jornada</h6>
                        <p class="card-text p-0 m-0 "> Diurna/Nocturna </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div><!-- end row -->

我需要两个元素具有相同的高度，并且每个容器中存在的元素按容器的可用高度分布。

【问题讨论】：

请注意，您可以在 Stack Overflow 上使用 Stack Snippets 重新创建您在 jsFiddle 上所做的事情，然后人们可以更轻松地理解和回答您的问题，而无需离开本网站。跨度>

标签： css flexbox

【解决方案1】：

问题 #1

我需要两个元素具有相同的高度

flexbox 没有height: 100%，因此不会填充其父容器的整个高度（与左列相同）。

所以让我们添加：由于您已经使用引导程序，只需将 h-100 类添加到标记的元素。

<!-- two container-->

<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 p-0 m-0 ">
  <div class="row p-0 m-0"> <!--=========THIS CONTAINER===========-->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6 p-0 m-0  text-center p-0  d-flex flex-column">
      <div class="d-flex  borde_gris_b m-0">

        <div class="h-100 flex-center flex-column  w-100">
          <h6 class="p-0 mx-0 ">Becas</h6>
          <p class="card-text p-0 m-0 "></p>
          <div class="d-flex mb-1">
            <div class="mr-3"> Beca Bien </div>
            <div>

              <p> $2,107,000 </p>
            </div>
          </div>
        </div>
      </div>

... more code
... more code
... more code

问题 #2

每个容器中存在的元素按容器的可用高度分布。

为此，您需要使用flex 属性，w3schools.com (click me) 对此进行了详细描述。还要注意他们第一个例子的描述：

让所有灵活项的长度相同，无论其内容如何。

这正是我们想要的！所以让我们也添加它。由于您只使用 bootstrap 而没有自定义类，因此指定路径将是一场噩梦，因此我们只需为其添加自定义 ID 并添加 CSS。

#second > div > div {
  flex: 1;
}

最后这是最终结果：

.borde_gris_b {
  border-bottom: 1px solid blue;
}

#second>div>div {
  flex: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row p-0 m-0 m-auto justify-content-center">
  <!-- first container-->
  <div class="col-12 col-sm-6  col-md-6 col-lg-6  col-xl-4 p-0 m-0  text-center p-0  d-flex flex-column" style="border:1px solid red;">
    <div class="d-flex  borde_gris_b m-0">
      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">SNIES</h6>
        <p class="card-text p-0 m-0 "></p>
        <div class="card-text">12967</div>
      </div>
    </div>
    <div class="d-flex  borde_gris_b m-0">

      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">Duración</h6>
        <p class="card-text p-0 m-0 "> 10 periodos academicos </p>
      </div>
    </div>

    <div class="d-flex  borde_gris_b m-0">

      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">Número de Créditos</h6>
        <p class="card-text p-0 m-0 "> 170 </p>
      </div>
    </div>
    <div class="d-flex  borde_gris_b m-0">

      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">Modalidad de Formación</h6>
        <p class="card-text p-0 m-0 "> Presencial </p>
      </div>
    </div>
  </div>

  <!-- two container-->

  <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 p-0 m-0 ">
    <div id="second" class="row p-0 m-0 h-100">
      <div class="col-12 col-sm-12 col-md-12 col-lg-6 p-0 m-0  text-center p-0  d-flex flex-column">
        <div class="d-flex  borde_gris_b m-0">

          <div class="h-100 flex-center flex-column  w-100">
            <h6 class="p-0 mx-0 ">Becas</h6>
            <p class="card-text p-0 m-0 "></p>
            <div class="d-flex mb-1">
              <div class="mr-3"> Beca Bien </div>
              <div>

                <p> $2,107,000 </p>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex  borde_gris_b m-0">

          <div class="h-100 flex-center flex-column  w-100">
            <h6 class="p-0 mx-0 mb-1 mt-0 ">Valor Matrícula</h6>
            <p class="card-text p-0 m-0 "> $5,696,000 </p>
          </div>
        </div>

        <div class="d-flex  borde_gris_b m-0">

          <div class="h-100 flex-center flex-column  w-100">
            <h6 class="p-0 mx-0 mb-1 mt-0 ">Jornada</h6>
            <p class="card-text p-0 m-0 "> Diurna/Nocturna </p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
<!-- end row -->

编辑#1

在此编辑中，我解释了以下评论：

谢谢！它变得非常清楚。只是一个疑问。默认情况下flex :1 属性？我知道放display: flex会使所有元素的大小相同（flex:1的结果相同，我明白）

如我提供的链接所述：

flex 属性是以下属性的简写：

flex-grow

flex-shrink

flex-basis。

CSS 语法为：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; 所以在这种情况下你也可以写flex-grow: 1。

另一方面，flex-grow 是这样描述的：

flex-grow 属性指定该项目相对于同一容器内的其他灵活项目将增长多少。

所以我们甚至有一个特定的 CSS 属性来实现您的目标。

但是display: flex 做了什么，为什么还不够？

display: flex 将容器初始化为具有默认值的弹性框。如果display: flex 足以与flex-grow: 1 做同样的事情，那么flex-grow 的默认值应该是1。但是，默认值为flex-grow: 0，因此添加display: flex 是不够的。

【讨论】：

谢谢！它变得非常清楚。只是一个疑问。 flex :1 属性是默认的吗？我知道放置 display: flex 使所有元素具有相同的大小（flex:1 的结果相同，我理解）。
我做了一个编辑（希望）向你解释。我添加了一些额外的信息以使其更易于理解。最后归结为display: flex 使用默认值初始化。 flex-grow 的默认值为 0 而不是 1。
谢谢！！！你能帮我解决这个问题吗？我做到了，但没有为我工作stackoverflow.com/questions/56927717/…
我想你已经得到了一些好的答案。您应该考虑如何构建代码，如何使用 bootstrap 以及应该使用多少 bootstrap，因为我看到了复杂的代码，如果没有 bootstrap（或至少没有那么多），这些代码将变得更加可读和简单。
另外，如果我的回答回答了您的问题（如果我理解正确，它确实回答了您的问题），那么不要忘记将其标记为已解决。

【解决方案2】：

希望对你有所帮助：

.borde_gris_b{
  border-bottom:1px solid blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row p-0 m-0 m-auto justify-content-center">
     <!-- first container-->
      <div class="col-12 col-sm-6  col-md-6 col-lg-6  col-xl-4 p-0 m-0  text-center p-0  d-flex flex-column" style="border:1px solid red;">
        <div class="d-flex  borde_gris_b m-0">
            <div class="h-100 flex-center flex-column  w-100">
                <h6 class="p-0 mx-0 mb-1 mt-0 ">SNIES</h6>
                <p class="card-text p-0 m-0 "></p>
                <div class="card-text">12967</div>
            </div>
        </div>
        <div class="d-flex  borde_gris_b m-0">

            <div class="h-100 flex-center flex-column  w-100">
                <h6 class="p-0 mx-0 mb-1 mt-0 ">Duración</h6>
                <p class="card-text p-0 m-0 "> 10 periodos academicos </p>
            </div>
        </div>
  
        <div class="d-flex  borde_gris_b m-0">

            <div class="h-100 flex-center flex-column  w-100">
                <h6 class="p-0 mx-0 mb-1 mt-0 ">Número de Créditos</h6>
                <p class="card-text p-0 m-0 "> 170 </p>
            </div>
        </div>
        <div class="d-flex  borde_gris_b m-0">

            <div class="h-100 flex-center flex-column  w-100">
                <h6 class="p-0 mx-0 mb-1 mt-0 ">Modalidad de Formación</h6>
                <p class="card-text p-0 m-0 "> Presencial </p>
            </div>
        </div>
    </div>
    
    <!-- two container-->
    
    <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 p-0 m-0 ">
        <div class="row p-0 m-0" style="height: 100%">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 p-0 m-0  text-center p-0  d-flex flex-column" style="height: 100%;
flex-direction: column;
box-sizing: border-box;
display: flex;
place-content: stretch space-between;
align-items: stretch;
max-width: 100%;">
                <div class="d-flex  borde_gris_b m-0" >

                    <div class="h-100 flex-center flex-column  w-100">
                        <h6 class="p-0 mx-0 ">Becas</h6>
                        <p class="card-text p-0 m-0 "></p>
                        <div class="d-flex mb-1">
                            <div class="mr-3"> Beca Bien </div>
                            <div>

                                <p > $2,107,000 </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex  borde_gris_b m-0">

                    <div class="h-100 flex-center flex-column  w-100">
                        <h6 class="p-0 mx-0 mb-1 mt-0 ">Valor Matrícula</h6>
                        <p class="card-text p-0 m-0 "> $5,696,000 </p>
                    </div>
                </div>
  
                <div class="d-flex  borde_gris_b m-0">

                    <div class="h-100 flex-center flex-column  w-100">
                        <h6 class="p-0 mx-0 mb-1 mt-0 ">Jornada</h6>
                        <p class="card-text p-0 m-0 "> Diurna/Nocturna </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div><!-- end row -->

【讨论】：