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

Question

我有3列，每列3个宽度（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>