Get flexbox column wrap to use full width and minimize height

问题

I have a container with a fixed width and variable height. I'm filling the container with an unknown amount of elements. I'd like the elements to arrange themselves in columns, from top to bottom and then left to right.

I could use column, but I don't know the maximum width of the child elements, so I can't set a column-width or column-count.

I think display: flex with flex-flow: column wrap is the way to go, but if I maintain height: auto on the container, it will generate as a single column without wrapping elements to use all the available width.

Can I convince flexbox to use all the available width and thus minimize the container's height? Would you suggest a different solution?

Fiddle: http://jsfiddle.net/52our0eh/

Source:

HTML:

<div>
    <span>These</span>
    <span>should</span>
    <span>arrange</span>
    <span>themselves</span>
    <span>into</span>
    <span>columns,</span>
    <span>using</span>
    <span>all</span>
    <span>available</span>
    <span>width</span>
    <span>and</span>
    <span>minimizing</span>
    <span>the</span>
    <span>container's</span>
    <span>height.</span>
</div>

CSS:

div {
    outline: 1px solid red;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    /*height: 8em;*/
}
span {
    outline: 1px solid blue;
}

回答1:

What you look for is more like the column rules: DEMO

div {/* do not set column numbers rule */
    width: 100%;
    -moz-column-width:4em;
    column-width:4em;
    -moz-column-gap:0;
    column-gap:0;
    -moz-column-rule:solid 1px;
    column-rule:solid 1px;
    text-align:center;
}

回答2:

I've compromised and set height: 10em (which seems acceptable) along with overflow-y: auto (to add a horizontal scrollbar in case of overflow) on the container element.

I would still like to know if there is a way to use all available width and minimize the height, though.

回答3:

In the end, your options for overflowing are hide, scroll, or wrap. How about this version instead? It takes any overflowing items and puts them on a second row. Items on the second row still fill the available space, but are larger due to the smaller number of items sharing the space.

http://jsfiddle.net/52our0eh/14/

div {
    outline: 1px solid red;
    display: flex;
    flex-flow: row wrap;
}
span {
    outline: 1px solid blue;
    flex:1;
}

来源：https://stackoverflow.com/questions/25446921/get-flexbox-column-wrap-to-use-full-width-and-minimize-height

标签

css

flexbox