Question

我有一个简单的flexbox布局...

.container {
    display:flex;
    flex-direction:row;
    width:100%;
}

.left {
    background:red;
}

.left img {
    padding:20px;
}

.right {
    background:green;
}

<div class="container">

<div class="left">
    <img src="https://dummyimage.com/300x200/000/fff">
</div>

<div class="right">
Right content
</div>

</div>

如何使右列填充剩余空间？

Answer 1

您可以将flex: 1;添加到.right

.container {
    display:flex;
    flex-direction:row
    width:100%;
}

.left {
    background:red;
}

.left img {
    padding:20px;
}

.right {
  background:green;
  flex: 1;
}

<div class="container">

<div class="left">
    <img src="https://dummyimage.com/300x200/000/fff">
</div>

<div class="right">
Right content
</div>

</div>

Answer 2

弹性成长怎么样？

.container {
    display:flex;
    flex-direction:row
    width:100%;
}

.left {
    background:red;
}

.left img {
    padding:20px;
}

.right {
    background:green;
    flex-grow:1;
}

<div class="container">

<div class="left">
    <img src="https://dummyimage.com/300x200/000/fff">
</div>

<div class="right">
Right content
</div>

</div>

使右栏填充剩余空间

2 个答案: