对齐后，Flexbox子项崩溃了

Question

在将内容与中间对齐后，无法弄清楚如何保持儿童项目两侧的高度相同。

我的目标是创建一个如图所示的布局：

  <div class="halves">
<div class="half">
   <div class="half-inner is-right">H1</div>
</div>    
<div class="half">
  <div class="half-inner is-left">H2
  <br> asdfs df <br>a sdfadsf sdfa dadsf df asdf afdf sadf asdf  </div>
</div>    

.halves{
  display: flex;
  border: 5px solid red;  
  .half{
    flex: 1;
    border: 10px solid yellow;
    /* align-items: center; */
    display: flex;    

    .half-inner{
      max-width: 100px;


      &.is-right{
        margin-left: auto;
        background: pink;
      }      
      &.is-left{
        background: green;
      }

    }
  }
}

我目前的代码：http://codepen.io/zsitro/pen/YqpLba 在我的示例中取消注释/* align-items: center; */，您可以看到子项目崩溃。

我感谢任何指导。 TY

Answer 1

align-items: center强制div进入flex容器的中心，如果没有宽度/高度/ flex-basis / whatnot的特定声明，它会使div与其内容一样大，保留空白。如果你想让div伸展，你需要将align-items值设为stretch，这样才能占用父容器的整个高度。

此外，如果您希望.half-inner div的宽度相等：flex: 1（或flex-grow: 1）是子属性，那么您当前的声明仅适用于{ {1}} div，而不是.half div。由于父.half-inner div是灵活容器，因此您只需在.half CSS下添加flex:1，就可以了。

.half-inner