时间戳

首页 > 解决方案 > Flex wrap 布局和父宽度

css - Flex wrap 布局和父宽度

问题描述

要么我遗漏了一些东西，要么这就是 flex 的工作原理。

给定一个具有最大宽度的 wrapping flex 容器，因为子级包裹父级宽度保持在最大宽度，即使通过包裹子级宽度可以减小。

这使得无法将容器与其容器的中心对齐。

这是一个说明问题的代码笔：

https://codepen.io/rsouthgate/pen/PozPyXZ

    .container {
      display: inline-flex;
      flex-wrap: wrap;
      max-width: 300px;
    }

该空间现在未使用

那么如何让容器在包装后不占用右侧的空间？

标签： cssflexbox

解决方案

以下是通过 , 按顺序排列的一些可能性justify-content：center, space-around, space-between。这些都只是改变了多余的外观。如果你想让孩子自己占用剩余的空间，请flex-grow: 1改用。

您可以阅读有关 css 技巧的更多信息：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

.outer {
  display: flex;
  flex-direction: column;
}

.container {
  justify-content: center;
  background: grey;
  display: inline-flex;
  margin: 0 auto 10px;
  flex-wrap: wrap;
  max-width: 300px;
}

.child {
  width: 25px;
  height: 25px;
  background: white;
  margin: 5px;
}

.container2 {
  justify-content: space-around;
  background: grey;
  display: inline-flex;
  margin: 0 auto 10px;
  flex-wrap: wrap;
  max-width: 300px;
}

.container3 {
  justify-content: space-between;
  background: grey;
  display: inline-flex;
  margin: 0 auto 10px;
  flex-wrap: wrap;
  max-width: 300px;
}

.container4 {
  justify-content: space-between;
  background: grey;
  display: inline-flex;
  margin: 0 auto 10px;
  flex-wrap: wrap;
  width: 300px;
}

.child-grow {
  flex-basis: 25px;
  flex-grow: 1;
  height: 25px;
  background: white;
  margin: 5px;
}
center
<div class="outer">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
Space around
<div class="outer">
  <div class="container2">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="container2">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Space between
<div class="outer">
  <div class="container3">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="container3">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Flex grow
<div class="outer">
  <div class="container4">
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
  </div>
  <div class="container4">
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
    <div class="child-grow"></div>
  </div>
</div>

推荐阅读