自动剪裁多行 flexbox

Question

我需要在一张漂亮的表格中展示 8-9 张卡片，每行有 2-4 行和 2-4 个元素。所有行都有相同数量的元素。

即根据容器元素的宽度，用户应该看到以太 8 或 9 卡：

C1 C2 C3 C4
C5 C6 C7 C8

或

C1 C2 C3
C4 C5 C6
C7 C8 C9

或

C1 C2
C3 C4
C5 C6
C7 C8

如果没有媒体查询，我该怎么做？

最自然的方式似乎是带有flex-wrap: wrap 的flexbox，但是如何解释flexbox 如果它只包含一个元素，我需要隐藏一行？有只有css的解决方案吗？我可以用 javascript 检测一个包装的 flexbox 有多少行吗？

Answer 1

Flexbox 结合flex-wrap: wrap 和媒体查询可以是一个很好的解决方案。

您可以设置多个断点并为不同的屏幕尺寸创建不同的行为。这可以是（除了设置flex-basis）也可以用display: none隐藏最后一个元素

使用移动优先的方法，您可以这样做：

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.wrapper div {
  flex-basis: 50%;
}
.wrapper div:last-child {
  display: none;
}
@media (min-width: 600px) {
  .wrapper div {
    flex-basis: 33.33%;
  }
  .wrapper div:last-child {
    display: block;
  }
}
@media (min-width: 992px) {
  .wrapper div {
    flex-basis: 25%;
  }
  .wrapper div:last-child {
    display: none;
  }
}

<div class="wrapper">
  <div>C1</div>
  <div>C2</div>
  <div>C3</div>
  <div>C4</div>
  <div>C5</div>
  <div>C6</div>
  <div>C7</div>
  <div>C8</div>
  <div>C9</div>
</div>

Answer 2

最好的办法是使用容器查询，但不幸的是，到 2021 年它们现在还没有得到广泛支持。除此之外，我不知道没有媒体查询的这个确切问题的纯 CSS 解决方案。

我仍然相信媒体查询是一个很好的解决方案（如果您能够找到视口宽度和容器宽度之间的关系），但由于您坚持不使用它们，您唯一的方法是使用一些 javascript （虽然布局依赖于 JS 可能不是一个好主意）。

一种方法是使用已经制作的库之一（例如EQCSS），但如果您想拥有自己的解决方案，您可以模拟容器查询，例如这样。

$(function() {
  updateWrapper(); // call on page load
  $(window).on('resize', function(){
    updateWrapper(); // update on window resize
  });
});

function updateWrapper() {
  var innerWrapper = $('.wrapper > div'); // get inner wrapper
  innerWrapper.removeClass(); // remove previously set class

  var elWidth = $('.wrapper').width(); // get container width
  if(elWidth < 600) { // set class according to container width
    innerWrapper.addClass('mobile');
  } else if (elWidth >= 600 && elWidth < 992) {
    innerWrapper.addClass('tablet');
  } else {
    innerWrapper.addClass('desktop');
  }
}

.wrapper {
  /* width: 400px; // use any value here */
  background: lightgray;
}
.wrapper > div {
  display: flex;
  flex-wrap: wrap;
}

.mobile div {
  flex-basis: 50%;
}
.mobile div:last-child {
  display: none;
}

.tablet div {
  flex-basis: 33.33%;
}
.tablet div:last-child {
  display: block;
}

.desktop div {
  flex-basis: 25%;
}
.desktop div:last-child {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div>
    <div>C1</div>
    <div>C2</div>
    <div>C3</div>
    <div>C4</div>
    <div>C5</div>
    <div>C6</div>
    <div>C7</div>
    <div>C8</div>
    <div>C9</div>
  </div>
</div>

Answer 3

由于您决定在 JavaScrpt 中观察行数，因此使用 javascript 很容易完成布局（无论如何，您最终将使用 JavaScript，所以我认为这不值得一笑）。 如果没有，则使用媒体查询来控制元素的显示，并使用 grid 代替 flexbox，这样：

文档结构：

.container
  #card1.card
  #card2.card
  ...
  #card8.card
  #card9.card

.container{
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
}
@media all and (min-width: 600px){
  .container{
    grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr;
  }
  .card:last-child{
    display: none;
  }
}

等其他人...