CSS 按内容优先级管理嵌套 Flexbox 宽度

Question

我在弹性盒子包装上苦苦挣扎。

我有这个 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>

如果没有overlflow，这里有一个隐藏不需要的元素的技巧：

.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>