对齐后，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容器的中心，并且在没有width/height/flex-basis/whatnot的特定声明的情况下，它使div与其内容一样大，保留空白。如果你想div伸展，你将需要align-items值为stretch，因此它占据了父容器的整个高度。

此外，如果你想.half-inner的div是宽度相等：flex: 1（或flex-grow: 1）是孩子的财产，所以你目前拥有的声明仅适用于.half的div，而不是.half-inner的div。由于父母.half div是一个弹性容器，因此您只需在.half-inner CSS下添加flex:1，那么您应该很好。

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

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

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

    } 
    } 
}