相关疑难解决方法(0)

所以我有一个带有列和最大高度的flexbox,使列在3列中彼此相邻.

这在Chrome中运行良好,但在Safari中,它似乎只使用最后(最右边)列来设置容器的实际高度.

我在这里举了一个例子:

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 400px;
  padding: 10px;
  border: 1px solid green;
}

div {
  flex-basis: 100px;
  width: 100px;
  background-color: red;
  margin: 10px;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Chrome和Safari中的结果将在下方进行屏幕截图.

铬:

苹果浏览器:

这似乎是一个明显的错误,但我找不到任何有关它的信息.

我想知道的是:

1. 这有什么变通方法吗？和
2. 有没有被报道为bug？

我正在创建一个大型动态导航菜单,我希望看起来像这样:

[----------- 100% PAGE WIDTH -----------] | GROUP A | GROUP C | GROUP F | GROUP G | | item | item | item | item | | item | | item | item | | | GROUP D | item | item | | GROUP B | item | item | | | item | | | | | item | GROUP E | | | | | item | | | |---------------------------------------| | | | | [------------- …

我正在创建一种卡式布局,其中各个卡片垂直堆叠.在更高的屏幕宽度下,使用越来越多的卡片 - 使用尽可能小的垂直空间.

我正在使用flex-flow: column wrap布局来做到这一点.但是,我发现容器需要有height或者max-height为了鼓励卡片包装.考虑到卡片的数量和它们各自的尺寸可能会发生变化,我无法确定这个高度在没有切断物品或下面有多余空间的情况下最佳状态.

任何人都可以告诉我这是否可能,或者我做错了什么？

附加片段.

.card-container {
  display: flex;
  flex-flow: column wrap;
  align-items: stretch;
}
.card {
  flex: 0 0 auto;
  width: 15rem;
  margin: 0.5rem;
  background-color: #f4f4f4;
  /* max-height: ??? */
}

<div class="card-container">
  <div class="card" style="height: 20em"></div>
  <div class="card" style="height: 17em"></div>
  <div class="card" style="height: 5em"></div>
  <div class="card" style="height: 10em"></div>
  <div class="card" style="height: 21em"></div>
  <div class="card" style="height: 10em"></div>
  <div class="card" style="height: 17em"></div>
  <div class="card" style="height: 8em"></div>
  <div class="card" style="height: 20em"></div>
  <div …

当使用列换行作为弹性流时，它似乎会对 chrome 中的容器尺寸造成问题。

HTML 示例：

<div class="root">
    <div class="outer">
        <div class="inner">A</div>
        <div class="inner">B</div>
        <div class="inner">C</div>
        <div class="inner">D</div>
        <div class="inner">E</div>
        <div class="inner">F</div>
        <div class="inner">G</div>
        <div class="inner">H</div>
        <div class="inner">I</div>
        <div class="inner">J</div>
    </div>
</div>

CSS: 正文{ 边距: 0; 填充：0；}

    .root{
        display: flex;
    }

    .outer{
        background-color: red;
        display: flex;
        flex-flow: column wrap;
        align-content: flex-start;
        flex: 1 0 auto;
        max-height: 400px;
    }

    .inner{
        background-color: violet;
        border: 1px solid black;
        height: 100px;
        width: 100px;
        flex: 1 0 auto;
        color: white;
        text-align: center;
        font-size: 50px;
    }

为什么 …

我使用 flexbox 在列中显示列表项。项目应在特定高度后环绕成更多列，列应水平居中，每列中的列表项应左对齐。我正在使用max-height来限制列表高度、flex-flow: column wrap构建环绕列以及align-content: center使列居中。

我意识到多列解决方案可能更明显，但我不想定义column-widthor column-count，所以我选择了 flexbox 解决方案。

当项目换行到多列时，问题列仅水平居中。如果只有一列，则该列不居中。我在 Windows 10 Home 和 MacOS Sierra 上的 Chrome 63 中都看到了这种行为。在 Firefox 中，它看起来像我想要的那样（下面的屏幕截图）。

.filter_drop {
  display: flex;
  flex-flow: column wrap;
  align-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 7em;
  border-bottom: 1px solid black;
}

.filter_drop li {
  margin: 0 1em 0 0;
  line-height: 1.2;
}

<ul class="filter_drop">
  <li>One</li>
  <li>Two </li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li> …