Question

我正在尝试在所有屏幕尺寸上响应性地显示项目列表。我将确切说明我的意思：

# on a screen with enough real estate to fit all items:
[ 1 2 3 4 5 6 7 8 ]

# on a screen that can fit 4 to 7 items:
[ 1 2 3 4 ]
[ 5 6 7 8 ]

# on a screen that can only fit 3 items:
[ 1 2 3 ]
[ 4 5 6 ]
[ 7 8   ]

# OR better
[ 1 2 3 ]
[ 4 5 6 ]
[  7 8  ]

依此类推。

我尝试使用flexbox：flex-flow: row wrap和grid：grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));来实现这一点，但是无论如何，结果是遵循以下原则：

# Using flex box
[ 1 2 3 4 5 6 ]
[ 7         8 ]

# Using grid
[ 1 2 3 4 5 6 ]
[ 7 8         ]

你们能想到解决方案吗？谢谢

编辑这是最古玩的片段。请注意，为了完全理解我的意思，请调整窗口大小，以使 5 和仅 5 个项目适合一行。在这两个示例中，第一行包含5列，第二行包含3列。我想要的是有4列和4列，而第一行有5个项目。

div.using-flex ul {
  background: #fc0;
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  margin: 0;
}

div.using-flex li {
  background: rgba(120, 0, 200, 0.5);
  list-style: none;
  flex: 1;
  margin: 4px;
  line-height: 40px;
  text-align: center;
  border-radius: 7px;
  min-width: 80px;
}

div.using-grid ul {
  background: #fc0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  padding: 10px;
  margin: 20px 0;
}

div.using-grid li {
  background: tomato;
  list-style: none;
  flex: 1;
  margin: 4px;
  line-height: 40px;
  text-align: center;
  border-radius: 7px;
  min-width: 80px;
}

<body>
  <div class="using-flex">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
      <li>Item6</li>
      <li>Item7</li>
      <li>Item8</li>
    </ul>
  </div>
  
  <div class="using-grid">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
      <li>Item6</li>
      <li>Item7</li>
      <li>Item8</li>
    </ul>
  </div>
</body>

Answer 1

我认为您可以这样做：

HTML

<body>
    <h1>Flex</h1>
    <hr>
    <div class="flex">
        <div class="item">FlexBox</div>
        <div class="item">FlexBox</div>
        <div class="item">FlexBox</div>
        <div class="item">FlexBox</div>
        <div class="item">FlexBox</div>
        <div class="item">FlexBox</div>
        <div class="item">FlexBox</div>
        <div class="item">FlexBox</div>      
    </div>
    <h1>Grid</h1>
    <hr>
    <div class="grid">
        <div class="item">Grid</div>
        <div class="item">Grid</div>
        <div class="item">Grid</div>
        <div class="item">Grid</div>
        <div class="item">Grid</div>
        <div class="item">Grid</div>
        <div class="item">Grid</div>
        <div class="item">Grid</div>
    </div>
</body>

SCSS

* {
    font-family: 'Indie Flower', cursive;
}
.item {
    padding: 1rem;
    border: 1px dashed rgba(black, .4);
}
.flex {
    display: flex;
    flex-wrap: wrap;
    .item {
        margin:10px;
        flex:1 1 auto;
    }
}

//OR

.grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
    grid-gap: 1.5rem;
}

使网格或flexbox中的项目每行具有相等的动态列数

1 个答案: