Flex列等于标题和内容高度

Question

我在其中添加了一列，这些列需要具有相同的高度。在这些列中是标题和主要内容，这两个元素中的内容可以变化，但我希望标题在所有列中具有相同的高度。因此列需要具有相同的高度，但这些列中的标题也需要相同的高度。

以下是html的一个例子：

.row{
    display: flex;
}

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

.header{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-content{
    flex: 1 0 auto;
}

.main-content{
    flex: 1 0 auto;
    width: 100%;
    float: left;
}

<ul class="row">
    <li class="column">
        <div class="header">
            <div class="header-content">
                <h2>Lorem ipsum dolor sit amet consectetur</h2>
                <p>Toloribus, dolorem animi quo ea?</p>
            </div>

            <a href="#" class="button">Read more</a>
        </div>
        <div class="main-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos. Beatae vero quas praesentium amet quos nemo, earum fugit.</p>
        </div>
    </li>
    <li class="column">
        <div class="header">
            <div class="header-content">
                <h2>Lorem ipsum dolor sit.</h2>
                <p>Tenetur odio minus, quas natus.</p>
            </div>

            <a href="#" class="button">Read more</a>
        </div>
        <div class="main-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos.</p>
        </div>
    </li>
</ul>

Answer 1

Flexbox无法均衡不共享父的元素之间的高度（实际上没有CSS布局方法可以）。由于你的标题没有，flexbox无法帮助你。您将需要javascript（或JS库）。

JQuery示例函数

$(document).ready(function(){

    var highestBox = 0;
        $('.row .header').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
   $('.row .header').height(highestBox);

});

＆＃13;

＆＃13;

$(document).ready(function() {

  var highestBox = 0;
  $('.row .header').each(function() {
    if ($(this).height() > highestBox) {
      highestBox = $(this).height();
    }
  });
  $('.row .header').height(highestBox);

});

＆＃13;

.row {
  display: flex;
}
.column {
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background:#c0ffee;
}
.header-content {
  flex: 1 0 auto;
}
.main-content {
  flex: 1 0 auto;
  width: 100%;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="row">
  <li class="column">
    <div class="header">
      <div class="header-content">
        <h2>Lorem ipsum dolor sit amet consectetur</h2>
        <p>Toloribus, dolorem animi quo ea?</p>
      </div>

      <a href="#" class="button">Read more</a>
    </div>
    <div class="main-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos. Beatae vero quas praesentium amet quos nemo, earum fugit.</p>
    </div>
  </li>
  <li class="column">
    <div class="header">
      <div class="header-content">
        <h2>Lorem ipsum dolor sit.</h2>
        <p>Tenetur odio minus, quas natus.</p>
      </div>

      <a href="#" class="button">Read more</a>
    </div>
    <div class="main-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos.</p>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;