Question

我有一个主<div>容器，由3个孩子<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

我想实现以下目标：

让child-flex容器在child-left和child-right之间显示内嵌，并占用剩余空间。
让所有flex-child-个孩子在child-flex容器中具有相等的宽度。目前我设置了flex: 1 0 auto;，但它似乎不起作用。可能是因为父母？

Answer 1

只需使用flexbox ...在这种情况下，在父级上使用display:flex，然后将#child-flex flex-container设置为嵌套弹性框。

根本不需要使用花车。

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>

Flexbox Conatiner内联占用剩余宽度

1 个答案: