javascript - 如何使用 flex 并排创建 3 个 div，其中中间 div 相对于其他两个 div 可以（增长和缩小）？

Question

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

我想创建三个 div A B C，其父级包含flexcss 属性。具有A300 像素的固定宽度和200 像素C的最小宽度，并且可以随着添加更多内容而增加宽度。

WhileB应该介于两者之间A，并且C应该根据 和 的宽度自动增长和A收缩C。

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

我试过但无法正确放置。

因为C我使用flex: 1 1 0%;固定宽度A和C固定宽度 -但没有用

标签： javascripthtmlcssflexbox

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>