Flexbox 等高答案

【问题标题】：Flexbox equal heightFlexbox 等高
【发布时间】：2016-09-26 02:36:35
【问题描述】：

我需要一些flexbox 的帮助。

我试图让包含第 2 项和第 3 项的列在 height 中与第 1 列相同。

如果项目 2 和 3 都被拉伸以填充可用空间，我会更喜欢。我已经尝试了所有方法，但似乎没有任何效果。

这是我的 HTML 代码

<div class="container ">
  <div class="row yellow">
  <div class="col-sm-6 pink">
    <h1>Item 1</h1>
    ...
  </div>
  <div class="col-sm-6">
   <div class="row">
     <div class="col-sm-12 cyan">
        <h1>Item 2</h1>
        ...
     </div>
       <div class="col-sm-12 green">
         <h1>Item 3</h1>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

我正在使用 Bootstrap 3 和 flexbox Grid，它扩展了 Bootstrap 3 以具有 flexbox 属性。

CodePen Link

Flexbox Grid

【问题讨论】：

您愿意更改您的 HTML 标记吗？
如果需要可以。我会喜欢一个非查询解决方案，但我会尽我所能让它发挥作用。

标签： html css twitter-bootstrap twitter-bootstrap-3 flexbox

【解决方案1】：

不使用框架flexboxgrid，只是简单朴素的flexbox

body,
html {
  height: 100%
}
.yellow {
  background: yellow
}
.pink {
  background: pink
}
.cyan {
  background: cyan
}
.green {
  background: green
}
.container {
  display: flex;
  flex-flow: column wrap;
  height: 100%
}
.row,
.col-xs-6 {
  height: 100%
}
.col-xs-12 {
  height: 50%
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container ">
  <div class="row yellow">
    <div class="col-xs-6 pink">
      <h1>Item 1</h1>
      ...
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12 cyan">
          <h1>Item 2</h1>
          ...
        </div>
        <div class="col-xs-12 green">
          <h1>Item 3</h1>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

应该不会太难，没有 flexbox 网格，也不需要更改 HTML 标记。

.row {
  display: flex;
}

.col-sm-6 .row {
  flex-direction: column;
  height: 100%;
  .col-sm-12 {flex: 1;}
}

https://codepen.io/anon/pen/pbojjQ

【讨论】：