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

【问题标题】：Distribute vertical spacing equally between two elements in one column using flexbox使用 flexbox 在一列中的两个元素之间平均分配垂直间距
【发布时间】：2018-02-14 20:24:10
【问题描述】：

我有 3 列，每列采用 3col 宽度（引导程序），每列中有两个元素一个接一个。这 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"> .....

【问题讨论】：

你能用工作代码创建一个 sn-p 吗？所以我们最好看看你正在使用的结构

标签： html css flexbox multiple-columns

【解决方案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>

【讨论】：