CSS 通过内容优先级管理嵌套的 flexbox 宽度

Question

我在 flexbox 包装方面苦苦挣扎。

我有这个 2 级列表:

<div class="wrapper">
  <div class="list list-1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
  <div class="list list-2">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
    <div class="item">F</div>
  </div>
  <div class="item">&#9733;</div>
</div>

如果需要，可以修改 HTML 结构。

基于包装宽度的渲染应该符合这些规则:

• 模仿一个列表(所有元素之间的边距相同)；
• 所有列表的第一项必须可见；
• 但 list-1 的内容优先于 list-2；
• 元素只有完整的元素才能在列表中可见；

渲染示例:

• 1 A X
• 1 2 3 A X
• 1 2 3 4 5 6 7 8 9 A X
• 1 2 3 4 5 6 7 8 9 A B C D E F X

以我目前的成就，我错过了优先级包装(两个列表的宽度和元素数量相同)，并且两个列表中元素之间的空格不相同。

.wrapper {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 37px;
  border-radius: 5px;
  background-color: #222;
  justify-content: flex-end;
}

.list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.list div:not(:first-child) {
    margin-left: 2px;
}

.item {
  display: flex;
  width: 45px;
  height: 26px;
  align-items: center;
  justify-content: center;
  margin: 4px 4px 10px;
  color: #fff;
  background-color: #3d3d3d;
}

欢迎任何想法!

Answer 1

您可以将 flex-shrink:0 添加到第一个列表，这样它就永远不会收缩，您将拥有您的优先级规则并将 min-width:0 添加到其他列表允许它在没有足够空间时缩小。您还应该允许 wrap，这样当它溢出时您就看不到半个元素。

在您的新规则中，最后一个元素的空格是错误的。

.wrapper {
  display: flex;
  flex-flow: row nowrap;
  height: 37px;
  border-radius: 5px;
  background-color: #222;
  justify-content: flex-end;
}

.list {
  display: flex;
  flex-wrap:wrap;
  
}

/*added this*/
.list-1 {
  flex-shrink:0;
}
.list-2 {
  min-width:0;
  overflow:hidden;
}
/**/
.item {
  display: flex;
  width: 45px;
  height: 26px;
  align-items: center;
  justify-content: center;
  margin: 4px 4px 10px;
  color: #fff;
  background-color: #3d3d3d;
  flex-shrink:0; /*this is also mandatory to avoid the item to shrink*/
}

<div class="wrapper">
  <div class="list list-1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
  <div class="list list-2">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
    <div class="item">F</div>
  </div>
  <div class="item">&#9733;</div>
</div>

没有overlfow，这里有一个隐藏不需要的元素的技巧:

.wrapper {
  display: flex;
  flex-flow: row nowrap;
  height: 37px;
  border-radius: 5px;
  background-color: #222;
  justify-content: flex-end;
}

.list {
  display: flex;
  flex-wrap:wrap;
  position:relative;
  align-self: flex-start; 
}
.list::after {
  content:"";
  position:absolute;
  bottom:0;
  top:37px;
  left:0;
  right:0;
  background:#fff;
}

/*added this*/
.list-1 {
  flex-shrink:0;
}
.list-2 {
  min-width:0;
}
/**/
.item {
  display: flex;
  width: 45px;
  height: 26px;
  align-items: center;
  justify-content: center;
  margin: 4px 4px 10px;
  color: #fff;
  background-color: #3d3d3d;
  flex-shrink:0; /*this is also mandatory to avoid the item to shrink*/
}

<div class="wrapper">
  <div class="list list-1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
  <div class="list list-2">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
    <div class="item">F</div>
  </div>
  <div class="item">&#9733;</div>
</div>