时间戳

首页 > 解决方案 > 以特定长度包裹的 Flexbox

html - 以特定长度包裹的 Flexbox

问题描述

我正在设计一个链接块。这个想法是允许链接换行到新行，但在较小的屏幕上，为了避免 10 行，可视区域变得更宽且可滚动。

该片段.inner-box设置为 1200 像素。当设置为 600px 时，您可以看到元素根据需要换行。

然而，目前的代码存在一个问题。

当设置为 1200px（当前）时，内部元素（芯片）不会到达最后，所以我在右边留下了一个空白空间。

.inner-box如果内部元素没有填满盒子，我需要的是缩小。我尝试将 width: 1200px 更改为 max-width: 1200px 但这不起作用。

将.outer-box始终保持相同的宽度。

任何帮助表示赞赏。

* {
  box-sizing: border-box;
}

.container {
  margin: 50px;
}

.outer-box {
  background-color: red;
  overflow-x: auto;
  width: 500px;
}

.inner-box {
  background-color: lime;
  display: flex;
  flex-wrap: wrap;
  margin-top: -8px;
  margin-left: -8px;
  width: 1200px;
}

.chip {
  background-color: aqua;
  border-radius: 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin-top: 8px;
  margin-left: 8px;
  padding: 0 12px;
}
<div class="container">
  <div class="outer-box">
    <div class="inner-box">
      <a class="chip">chip</a>
      <a class="chip">long chip</a>
      <a class="chip">chip</a>
      <a class="chip">longer chip</a>
      <a class="chip">chip</a>
      <a class="chip">longest chip</a>
      <a class="chip">long chip</a>
      <a class="chip">chip</a>
      <a class="chip">longer chip</a>
      <a class="chip">chip</a>
      <a class="chip">longer chip</a>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

工作示例

inline-flex 的使用允许内容在需要时变小。通过对不同的容器设置限制，我们得到了想要的滚动结果，但在需要时也可以进行换行。

CSS

.container{
  background: red;
  width: 600px;
  overflow-x: auto;
  display: inline-flex;
}

.outer{
    overflow-x: auto;
  background: purple;
  display: inline-flex;
  flex-wrap: wrap;
  flex: 1 0 auto;
  max-width: 1200px;
}

.inner{
  background: yellow;
  width: 100px;
}

推荐阅读