关于flex布局

Question

父div display: flex flex-dir*: row

有两个子div，

左面的子div 高度由内容撑起，同时也撑起了父div的高度

在不能手动指定高度的情况下

右面的子div怎么自动占满父div的高度呢？

Answer 1

少侠，你这个需求不是默认表现吗？
align-items 的默认值是 streach，就是每一个子项撑满父元素高度。

或者针对某个子元素单独设置align-self也可以

Answer 2

谢邀。可以参考bootstrap等各大ui样式库的样式写法 container row col

• html:

<div class="container">
    <div class="row left">
        
    </div>
    <div class="row right">
        
    </div>
</div>

• css:

.container{
    display:flex;
    flex-direction:row;
}
.row{
    flex:1;
    display:flex
}
.left{
    /*可以指定左右比列 flex:1;*/
}
.right{
    /*可以指定左右比列 flex:2;*/
    background-color:red;
    width:100%
}
.col{
    /*可以扩展列*/
}