首页 文章

如何使Flex容器适合内容[重复]

提问于
浏览 次
2

这个问题在这里已有答案：

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

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

enter image description here

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

Html & 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;
}
html css css3 flexbox

2 回答

  • 1

    除非你让你的弹性边缘在宽度上增长，否则没有“真正的”解决方案 .

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

    .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;
}

    <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>
    回复于
  • 0

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

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

    Here是jsfiddle .

    回复于

相关问题