Question

我正在努力解决flexbox包装问题。

我有这两个级别的列表：

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

这里没有多余的东西，可以用来隐藏不需要的元素：

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

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

1 个答案: