html - 使用 flexbox 在一列中的两个元素之间平均分配垂直间距

Question

我有 3 列，每列采用 3col 宽度(bootstrap)并且在每列中有两个元素一个接一个。这 3 列中的前 3 个顶部元素很好地垂直对齐，但底部的元素位于不同的位置，因为顶部的高度不同。如果我给列内的元素一个固定的高度，比如 300px 那么它工作正常，但我想知道是否有任何其他方法可以在不给出特定高度和仅使用 flexbox 的情况下实现这一点？

<div class="gray_background">
<div class="container">
    <div class="row">
<div class="col-lg-12 col-md-12">
<section id="text-18" class="widget widget_text"><h2 class="widget-title">New and Refurbished Equipment</h2>            <div class="textwidget"></div>
        </section></div>

<div class="footer_widget col-lg-3 col-md-12">
  <section id="sole_source_main_widget_8-3" class="widget sole_source_main_widget_8"><h2 class="widget-title"> 


</h2><h4>Flexible Endoscopes</h4>

<h2><a href="http://localhost:8888/wordpress/product/gastroscopes/">Gastroscopes</a></h2>

<h2><a href="http://localhost:8888/wordpress/product/bronchoscopes/">Bronchoscopes</a></h2>

<h2><a href="http://localhost:8888/wordpress/product/colonoscopes/">Colonoscopes</a></h2>

<h2><a href="http://localhost:8888/wordpress/product/hysteroscopes/">Hysteroscopes</a></h2>

<h2><a href="http://localhost:8888/wordpress/product/small-diameter-ureteroscopes/">Small Diameter Ureteroscopes</a></h2>

<h2><a href="http://localhost:8888/wordpress/product/choledscopes/">Choledscopes</a></h2>



  </section>  <section id="sole_source_main_widget_8-5" class="widget sole_source_main_widget_8"><h2 class="widget-title"> .....

Answer 1

我找到了一个解决方案:

使用 align-items: stretch; 在 flex 中设置一个大容器，这样每一列都将具有相同的高度。

然后将 heigth:50% 设置为列中的元素

我加了边距，看起来更好

.big-container
{
  display:flex;
  align-items: stretch;
}

.column
{
  display:flex;
  flex-direction: column;
  flex:1;
}

.column div
{
  height:calc(50% - 15px);
  margin-bottom:15px;
}

<div class="big-container">
<div class="column">
  <div>
    <h2>col 1</h2>
    <p>a</p>
    <p>a</p>
    <p>a</p>
  </div>
  <div>
    <h2>col 2</h2>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
  </div>
</div>

<div class="column">
  <div>
    <h2>col 3</h2>
    <p>a</p>
    <p>a</p>
    <p>a</p>
  </div>
  <div>
  <h2>col 4</h2>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  </div>
</div>
<div class="column">
  <div>
    <h2>col 5</h2>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
  </div>
  <div>
    <h2>col 6</h2>
    <p>a</p>
    <p>a</p>
    <p>a</p>
  </div>
</div>
</div>