html - Flexbox 容器内联占用剩余宽度

Question

我有一个主 <div>容器，由 3 个 child 组成 <div>的:

<div id="parent">
  <div id="child-left">.. some markup ..</div>
  <div id="child-flex>
    <div id="flex-child-1">
    <div id="flex-child-2">
    <div id="flex-child-3">
    <div id="flex-child-4">
  </div>
  <div id="child-right">.. some markup ..</div>
</div>

• child-left是display:inline和 float:left , 有一个固定的设置 width
• child-right是display:inline和 float:right ,带固定装置 width
• child-flex是display:inline-flex

我想实现以下目标:

1. 获取 child-flex在 child-left 之间内联显示的容器和 child-right , 并占用所有剩余空间。
2. 获取所有flex-child- child-flex 中的子项宽度相等容器。目前我已经设置了flex: 1 0 auto; , 但它似乎不起作用。可能是因为 parent ？

Answer 1

只需在整个过程中使用 flexbox...在这种情况下，在父级上使用 display:flex，然后使 #child-flex flex-container 成为 嵌套 flexbox。

根本不需要使用 float 。

Codepen Demo

#parent {
  display: flex;
  height: 100px;
}
#child-right,
#child-left {
  flex: 0 0 100px;
  background: pink;
}
#child-flex {
  flex: 1;
  background: lightblue;
  display: flex;
}
.flex-child {
  flex: 1;
  border: 1px solid grey;
}

<div id="parent">
  <div id="child-left">some markup</div>
  <div id="child-flex">
    <div class="flex-child"></div>
    <div class="flex-child"></div>
    <div class="flex-child"></div>
    <div class="flex-child"></div>
  </div>
  <div id="child-right">some markup</div>
</div>