关于flex布局

十点四十八
  • 343

父div display: flex flex-dir*: row

有两个子div,

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

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

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

回复
阅读 1.3k
2 个回答
✓ 已被采纳

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

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

谢邀。可以参考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{
    /*可以扩展列*/
}
宣传栏