Question

我正在尝试重写html表以引导flex div。

关于如何使容器的逻辑子元素保持相同高度的堆栈？

看起来有些错误的行为，然后我尝试将.content高度设置为100％，下一行元素溢出第一行。

<div class="container">
  <div class="row">
    <div class="col">
      <div class="header">
        <h2>Header</h2>
      </div>
      <div class="content d-flex">
        <div class="text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class="text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
          <p>Iam sub 2.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="header">
        <h2>Header3</h2>
      </div>
      <div class="text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
<!--end first row -->

  <div class="row">
    <div class="col">
      <div class="header">
        <h2>Header</h2>
      </div>
      <div class="content d-flex">
        <div class="text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class="text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="header">
        <h2>Header3</h2>
      </div>
      <div class="text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
</div>```

I expect all elements of row to be the same height.

Answer 1

您也可以通过将.col divs弹性框设置为高度，并为.content框使用flex-grow来达到相同的高度：

.col{
  display: flex;
  flex-flow: column;
}
.col .content{
  flex-grow: 1;
}

查看此更新的jsFiddle：https://jsfiddle.net/t29ph10d/

Bootstrap Flex容器适合儿童使用

1 个答案: