Flexbox填写行并确定每行的子代数 [英] Flexbox to fill out row and determine the number of children per row

问题描述

我在容器中有一堆箱子.我不知道一行中可以容纳多少个盒子，屏幕越大，盒子应该越多.但是，我希望每一行都被完全填充，并且希望将框的大小调整为100px至150px之间，以确保每一行都被填充.

I have a bunch of boxes in a container. I don't know how many boxes fit onto a row, the bigger your screen is the more boxes there should be. However I want each row to be fully filled and the boxes resized (within 100px to 150px) to ensure that each row is filled.

http://jsfiddle.net/ssxu5moy/11/

.container2 {
    width:100%;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
}

.box {
    border: 1px solid purple;
    background: blue;
    align-self: stretch;
    min-width: 100px;
    max-width: 150px;
}

<div class="container2">
    <div class="box box1">
    </div>
    <div class="box box2">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
</div>

我已经在javascript中做到了这一点，并且工作正常，但是我考虑过将flexbox更改为更简单的方法，但是我很难使其工作.在flexbox中甚至有可能吗?

I already did this in javascript and it works fine, but I thought about changing to flexbox to be simpler, but I'm having difficulty getting it working. Is this even possible in flexbox?

推荐答案

是的！你可以做到的. max-width使框停在150px上，这不是您想要的，因为您希望每个框都在自动换行后填充行中的剩余空间?

Yeah! You can do that. The max-width is making the boxes stop at 150px which appears not what you want as you want each box to fill the remaining space in the row after the wrap right?

这是更新的小提琴: http://jsfiddle.net/disinfor/ssxu5moy/12/

Here's an updated fiddle: http://jsfiddle.net/disinfor/ssxu5moy/12/

我在CSS中所做的唯一更改是将min-width和max-width更改为flex属性:

The only thing I changed in your CSS was the min-width and max-width to the flex property:

CSS:

.box {
    border: 1px solid purple;
    background: blue;
    align-self: stretch;
    flex:1 0 100px;
}

如果我理解您的问题，那么这应该是您想要的. 注意事项: flex属性需要使用浏览器前缀.

If I understood your question, this should be what you're looking for. Caveat: flex property needs browser prefix.

以下是flex属性速记的简要说明: https://css-tricks.com/almanac/properties/f/flex/

here's some light reading on the flex property shorthand: https://css-tricks.com/almanac/properties/f/flex/

如果链接消失了: 这是flex-grow，flex-shrink和flex-basis的简写.

In the event the link is gone: This is the shorthand for flex-grow, flex-shrink and flex-basis (respectively).

这篇关于Flexbox填写行并确定每行的子代数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！