Question

我有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 -->

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

Answer 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）上有很好的描述。还要注意他们的第一个例子的描述：

所有柔性物品的长度相同，无论其内容如何。

这正是我们想要的！因此，我们也添加它。由于只使用了引导程序而不使用自定义类，因此指定路径将是一场噩梦，因此我们只需为其添加自定义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使用默认值将容器初始化为Flexbox。如果display: flex足以执行与flex-grow: 1相同的操作，则flex-grow的默认值应为1。但是，默认值为flex-grow: 0，仅添加display: flex是不够的。

Answer 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 -->

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

2 个答案:

问题1

问题2

编辑＃1