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

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

.red-border{
border:1px solid red;
}

<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 red-border">
        <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 text-center col-lg-6 col-xl-6 p-0 m-0 red-border">
                <div class="d-flex  borde_gris_b m-0" >
                    <div class="h-100 flex-center flex-column  w-100">
                        <h6 class="p-0 mb-1 ">Becas</h6>
              
                        <div class="d-flex justify-content-center flex-row">
                            <span class="mr-3"> Beca Bien </span>           
                                <p class="mb-0"> $2,107,000 </p>
                            
                        </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><!-- end row -->

Answer 2

我有解决办法。它可能会帮助您。我给第二个容器提供了一个类.container-2，并将其配置为flexbox。

df.info()

<class 'pandas.core.frame.DataFrame'>
TotalCharges        7043 non-null object

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

.container-2 {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-end;
}

如何使用flexbox使元素占据列的可用空间？

2 个答案: