自动裁剪多线柔性箱
我需要在一个漂亮的表中显示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检测包装柔性盒有多少行吗？
回答 3
Stack Overflow用户
发布于 2021-12-21 13:49:18
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>
Stack Overflow用户
发布于 2021-12-22 12:14:21
最好是使用容器查询，但不幸的是，在2021年，它们没有得到广泛的支持。除此之外，我不知道在没有媒体查询的情况下，只有CSS才能解决这个问题。
我仍然认为媒体查询是一个很好的解决方案(在这种情况下，您可以找到viewport宽度与容器宽度之间的关系)，但是由于您坚持不使用它们，您唯一的方法就是使用一些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>
Stack Overflow用户
发布于 2021-12-21 13:54:11
由于您决定在JavaScrpt中观察行数，所以使用javascript很容易完成布局(不管怎么说，您最终将使用JavaScript，因此我认为这不值得大惊小怪)。如果没有，请使用媒体查询来控制元素的显示，并以这种方式使用网格而不是柔性盒：
文件结构：
.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;
}
}其他人也是如此。
https://stackoverflow.com/questions/70436051
复制相似问题
腾讯云开发者
