时间戳

首页 > 解决方案 > 容器上的 Flex 方向和 flex wrap 会在 flex-item 中产生额外的空间

html - 容器上的 Flex 方向和 flex wrap 会在 flex-item 中产生额外的空间

问题描述

我有以下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      *,
      *:before,
      *:after {
        box-sizing: border-box;
      }

      .list {
        line-height: 22px;
      }

      .list:before,
      list:after {
        display: table;
        content: "";
      }

      .list:after {
        clear: both;
      }

      .right-item {
        float: left;
        width: 50px;
        height: 50px;
        display: table;
        background-color: blue;
        border: 1px solid green;
        display: table;
        float: left;
        width: 50px;
        height: 50px;
        margin-right: 8px;
        margin-bottom: 8px;
        text-align: center;
        vertical-align: top;
      }

      .wrapper {
        display: inline-block;
        width: 100%;
      }

      .wrapper:before,
      .wrapper:after {
        content: "";
        display: table;
      }

      .wrapper:after {
        clear: both;
      }

      .floated-item {
        float: left;
        width: 50px;
        height: 50px;
        background-color: red;
        border: 1px solid black;
        margin: 0 8px 8px 0;
      }

      .flex-item {
        flex: auto;
        max-width: 100%;
      }

      .flex-container {
        display: flex;
        align-items: center;
        min-height: 15px;
        position: relative;
        align-items: center;
      }

      .flex-column {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        min-height: 1px;
        position: relative;
        max-width: 100%;
      }

      .outer-wrapper {
        display: flex;
        flex-flow: column wrap;
        margin-bottom: 24px;
        vertical-align: top;
      }

      .label {
        flex-grow: 0;
        overflow: hidden;
        display: inline-block;
        position: relative;
        max-width: 100%;
        min-height: 1px;
      }

      .label-inner {
        height: auto;
        position: relative;
        display: inline-flex;
        align-items: center;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <form>
      <div class="outer-wrapper">
        <div class="label"><label class="label-inner">Label</label></div>
        <div class="flex-column">
          <div class="flex-container">
            <div class="flex-item">
              <span class="wrapper">
                <div class="list">
                  <div class="floated-item">
                    <span><div class="floated-item"></div></span>
                  </div>
                  <div class="floated-item">
                    <span><div class="floated-item"></div></span>
                  </div>
                  <div class="floated-item">
                    <span><div class="floated-item"></div></span>
                  </div>
                  <div class="floated-item">
                    <span><div class="floated-item"></div></span>
                  </div>
                  <div class="floated-item">
                    <span><div class="floated-item"></div></span>
                  </div>
                </div>
                <div class="right-item"></div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </form>
    <div>content</div>
  </body>
</html>

起初，我不知道增加的额外空间会发生什么。经过长时间的调试，问题是（至少看起来是，它修复了额外的空间，但可能是其他原因导致它，我不知道）flex-wrap: wrap在.outer-wrapper. 当我设置它时，flex-wrap: nowrap它会修复额外的空间。

我通过了 Flexbox 规范，也通过了 CSS 规范的 Visual Formatting Model，关于浮点使用、格式化上下文等，但我仍然不知道可能是什么问题。

标签： htmlcssflexbox

解决方案

这首先与flex-column. 使flex-direction下一个 div ( .flex-item) 占据整个宽度。如果您flex-direction:column在代码中删除，最后一个 div ( right-item) 将自动落在下一行。

此外，如果您指定width:100%flex-column，空间将消失，因为容器确信他可以将所有内容放在一行中。

然后你给你的.flex-item班级flex:auto女巫是flex-basis财产，根据css-tricks意味着额外的空间是根据它的 flex-grow 值分配的。（如果你从你的代码中删除它，你right-item也将在下一行，因为他只会为你的包装器占用所需的空间，并且不会改变）。

之后，您指定 wrapper* 具有 100% 的宽度（如果您只是width:100%从.wrapper类中删除 ，而不触及 flex-direction 或 flex:auto，则会发生同样的事情（right-item将在下一行）。

底线是 flex 容器有很多理由认为您需要 2 行来容纳所有元素。但是由于flex-direction, theflex:auto和 thewidth:100%你强制它在一行中。

所以这可能看起来很奇怪，但是当您结合多种显示类型（flex、inline 和 table）并且您过于依赖容器来计算它们的大小时，就会发生这种情况。

推荐阅读