如何使用 flex 并排创建 3 个 div，其中中间 div 可以相对于其他两个 div(增长和收缩)？

Question

如何创建3div并排使用flex中间div可以(增长&收缩)相对于其他两个div ?

我想创建三个divABC与父包含flexcss属性。A的固定宽度为300px,C的最小宽度为200px，并且可以随着添加更多内容而增加宽度。

当B应该在A和C之间时，应该根据A和C的宽度自动增大和缩小。

虽然A和C可以是任意宽度，但300px和200px只是示例。

我已经试过了，但无法正确放置。

对于C，我使用flex: 1 1 0%;与A和C固定宽度-，但没有工作

Answer 1

你可以给childB，你可以在这里阅读更多关于flex

flex: 1;

.parent {
display: flex;
}
.child {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.childA {
flex-basis: 300px;
background-color: turquoise;
}
.childB {
flex: 1;
background-color: wheat;
}
.childC {
flex-basis: 200px;
background-color: blueviolet;
}

<div class="parent">
<div class="child childA">A</div>
<div class="child childB">B</div>
<div class="child childC">C</div>
</div>

Answer 2

如果你自己写代码会更容易，这是不工作的

.abc {
display: flex;
height: 200px;
width: 400px;
margin: 0 auto;
border: 1px solid black;
}
.A {
min-width: 150px;
flex-shrink: 0;
background-color: aliceblue;
}
.B {
flex-grow: 1;
background-color: grey;
}
.C {
min-width: 100px;
flex-shrink: 0;
background-color: antiquewhite;
}

<div class="abc">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
</div>

Answer 3

HTML:

<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>

CSS:

.container {
display: flex;
flex-wrap: nowrap;
border: 1px solid red;
height: 100px;
}
.box {
border: 1px solid black;
margin: 5px 5px 5px 5px;
}
.box:nth-child(2) {
width:25%;
background-color: blue;
}

可以使用n -child(child))选择任意子元素并自定义

结果:https://codepen.io/pk-salma/pen/qBjqwBG