如何使Flex容器适合内容

Question

我希望Flex容器在父级中扩展到最大大小，并缩小以适合项目。

在示例中，我设置了Flex容器的背景颜色，以显示容器。现在它填充了父级的整个宽度，但我不想要正确的边距。

这是我到目前为止所得到的：

Html＆amp; CSS ：

<div class="lc-category-items-wrap">
    <section>
        Obj 1
    </section>
    <section>
        Obj 2
    </section>
    <section>
        Obj 3
    </section>
    <section>
        Obj 4
    </section>
    <section>
        Obj 5
    </section>
    <section>
        Obj 6
    </section>
</div>

.lc-category-items-wrap {
    display: flex;
    flex: 1 1 auto;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.lc-category-items-wrap > section {
    width: 244px;
    min-height: 270px;
}

Answer 1

没有＆＃34;真实＆＃34;解决方案，除非你让你的弹性边距增加。

如果您不想这样做，我建议您在这种情况下使用justify-content: space-between;或justify-content: space-around;：

＆＃13;

＆＃13;

.lc-category-items-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.lc-category-items-wrap>section {
  width: 244px;
  min-height: 270px;
  background: #ddd;
  margin: 5px;
}

＆＃13;

<div class="lc-category-items-wrap">
  <section>
    Obj 1
  </section>
  <section>
    Obj 2
  </section>
  <section>
    Obj 3
  </section>
  <section>
    Obj 4
  </section>
  <section>
    Obj 5
  </section>
  <section>
    Obj 6
  </section>
  <section>
    Obj 7
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为.lc-category-items-wrap > section添加以下样式，以便它可以拉伸到整个容器宽度而没有任何边距。

flex-grow: 1;
flex-basis: 0;

Here是jsfiddle。