Question

我正在尝试创建一个使用flex-wrap: wrap的Flexbox容器，但是一旦它被包裹的只是它需要的宽度，那么它就可以居中。

现在，一旦我将窗口调整到足够小以使元素换行，元素就会继续使用它可以达到的最大宽度，从而导致它的子元素一直向左推。

以下是我Plunker

的链接

这是我调整窗口大小的GIF。正如您所看到的，当绿色和红色div具有足够的空间位于同一条线上时，它们显示为居中，但不会在它们换行时。优选地，红色div的左边应该有与绿色div的右边一样多的空白。

最好，当行换行时，它应如下所示：

非常感谢任何帮助！

Answer 1

您不希望Flexbox容器中的块元素（红色和绿色框）上有宽度。这类似于“响应式”设计模式而不是flex。

Flex宽度（或高度）保持不变无论。因此，一定要确定容器的大小，并弯曲其子容器。

.flex-container {
    width: 25%;
    height: auto;
    margin:auto;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

.flex-container div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}

.green-block{
  /*min-width: 200px;*/
  background-color: green;
  padding: 10px;
  display:flex;
}

.red-block{
  /*min-width: 300px;*/
  background-color: red;
  padding: 10px;
  display:flex;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="flex-container">
      <div class="flex-row-wrappable">
        <div class="red-block">I'm a red block</div>
        <div class="green-block">Imma green block, and I have more width than my red counterpart.</div>
      </div>
    </div>
  </body>

</html>

如何创建具有居中内容的Flexbox容器，并在包装时保持中心？

1 个答案:

如何创建具有居中内容的Flexbox容器，并在包装​​时保持中心？

1 个答案:

如何创建具有居中内容的Flexbox容器，并在包装时保持中心？