时间戳

首页 > 解决方案 > flex 列在绝对位置换行

css - flex 列在绝对位置换行

问题描述

我似乎无法解决这个问题。我正在研究（现有）菜单结构。当前的菜单从来没有考虑过我们拥有的子项目的数量，因此它会从视口溢出。由于它的粘性，某些项目无法访问，这是有问题的。由于 flexbox 存在一个问题，即 flexbox 本身在换行时不会调整其宽度，因此子菜单的背景不会继续。再次出现问题，因为浮动文本，而不是其他文本，很烦人。阅读后，似乎主要使用的是写作模式解决方案。但是，当我尝试应用它时，它仍然会得到一个单数行，因为标题元素必须有 position: fixed 附加到它。

举例说明：

html:

<header>
  <div class="wrapper">
    <ul class="parent">
      <li class="child">Menu item 1</li>
      <li class="child">Menu item 2</li>
      <li class="child">Menu item 3
        <ul class="sub-parent">
          <li class="sub-child">Sub item 1</li>
          <li class="sub-child">Sub item 2</li>
          <li class="sub-child">Sub item 3</li>
          <li class="sub-child">Sub item 4</li>
          <li class="sub-child">Sub item 5</li>
          <li class="sub-child">Sub item 6</li>
          <li class="sub-child">Sub item 7</li>
          <li class="sub-child">Sub item 8</li>
          <li class="sub-child">Sub item 9</li>
          <li class="sub-child">Sub item 10</li>
          <li class="sub-child">Sub item 12</li>
          <li class="sub-child">Sub item 13</li>
          <li class="sub-child">Sub item 14</li>
          <li class="sub-child">Sub item 15</li>
          <li class="sub-child">Sub item 16</li>
          <li class="sub-child">Sub item 17</li>
          <li class="sub-child">Sub item 18</li>
          <li class="sub-child">Sub item 19</li>
        </ul>

      </li>
      <li class="child">Menu item 4</li>
      <li class="child">Menu item 5</li>
      <li class="child">Menu item 6</li>
    </ul>
  </div>
</header>
<div class="content">
Sub-items should wrap till end of viewport
</div>

CSS：

header{
 position: fixed;
 top: 0;

}

.wrapper{
  background: #8AB9B5;

}

.parent{
  display: flex;
  background: #C8C2AE;
  list-style: none;
  width: 100vw;
}

.child{
  margin: 0.5em;
}

.sub-parent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 80vh;
  background: #D0CDD7;
  position: absolute;
  margin: 0;
  list-style: none;
  padding: 0;
  writing-mode: vertical-lr;
}

.sub-child{
  background: #ACB0BD;
  display: block;
  margin: 0.5em;
  writing-mode: horizontal-tb;
}

.content{
  margin-top:100px;
}

https://jsfiddle.net/Tristanschaaf/7pd504hj/99/

当前结果： 在此处输入图像描述

预期/想要的结果： 在此处输入图像描述

子项也可能具有子项结构。

我似乎无法找到一种方法让 flexbox 看到它可以垂直扩展。此外，Firefox 中存在一个问题，在触发视口调整大小之前，高度似乎最初设置为 0。

我非常清楚这种结构可能会导致它自己的用户体验问题，但我不会像往常一样在这里讨论这些问题，它也会影响业务的其他方面，我现在无法更改它。

标签： cssflexboxabsolute

解决方案

您可以尝试以下方法。您只需要根据您的要求设置.sub-parent类的宽度。（到目前为止，我已经设置了宽度：40%）并且我已经设置了flex-direction: 列。和溢出：自动。

header {
  position: fixed;
  top: 0;
}

.wrapper {
  background: #8AB9B5;
}

.parent {
  display: flex;
  background: #C8C2AE;
  list-style: none;
  width: 100vw;
}

.child {
  margin: 0.5em;
}

.sub-parent {
  display: flex;
  flex-wrap: wrap;
  background: #D0CDD7;
  position: absolute;
  margin: 0;
  list-style: none;
  padding: 0;
  margin-right: 60px;
}

.sub-child {
  flex: 0 10%;
  background: #ACB0BD;
  display: block;
  margin: 0.5em;
  writing-mode: horizontal-tb;
}

.content {
  margin-top: 100px;
}
<header>
  <div class="wrapper">
    <ul class="parent">
      <li class="child">Menu item 1</li>
      <li class="child">Menu item 2</li>
      <li class="child">Menu item 3
        <ul class="sub-parent">
          <li class="sub-child">Sub item 1</li>
          <li class="sub-child">Sub item 2</li>
          <li class="sub-child">Sub item 3</li>
          <li class="sub-child">Sub item 4</li>
          <li class="sub-child">Sub item 5</li>
          <li class="sub-child">Sub item 6</li>
          <li class="sub-child">Sub item 7</li>
          <li class="sub-child">Sub item 8</li>
          <li class="sub-child">Sub item 9</li>
          <li class="sub-child">Sub item 10</li>
          <li class="sub-child">Sub item 12</li>
          <li class="sub-child">Sub item 13</li>
          <li class="sub-child">Sub item 14</li>
          <li class="sub-child">Sub item 15</li>
          <li class="sub-child">Sub item 16</li>
          <li class="sub-child">Sub item 17</li>
          <li class="sub-child">Sub item 18</li>
          <li class="sub-child">Sub item 19</li>
          <li class="sub-child">Sub item 20</li>
          <li class="sub-child">Sub item 21</li>
          <li class="sub-child">Sub item 22</li>
          <li class="sub-child">Sub item 23</li>
          <li class="sub-child">Sub item 24</li>
          <li class="sub-child">Sub item 25</li>
          <li class="sub-child">Sub item 26</li>
          <li class="sub-child">Sub item 27</li>
          <li class="sub-child">Sub item 28</li>
          <li class="sub-child">Sub item 29</li>
          <li class="sub-child">Sub item 30</li>
          <li class="sub-child">Sub item 31</li>
          <li class="sub-child">Sub item 32</li>
          <li class="sub-child">Sub item 33</li>
          <li class="sub-child">Sub item 34</li>
          <li class="sub-child">Sub item 35</li>
          <li class="sub-child">Sub item 36</li>
          <li class="sub-child">Sub item 37</li>
          <li class="sub-child">Sub item 38</li>
          <li class="sub-child">Sub item 39</li>
          <li class="sub-child">Sub item 40</li>
          <li class="sub-child">Sub item 41</li>
          <li class="sub-child">Sub item 42</li>
          <li class="sub-child">Sub item 43</li>
        </ul>

      </li>
      <li class="child">Menu item 4</li>
      <li class="child">Menu item 5</li>
      <li class="child">Menu item 6</li>
    </ul>
  </div>
</header>
<div class="content">
  Sub-items should wrap till end of viewport
</div>

推荐阅读