2

「flex」プロパティにより、フレックスアイテムが一方向の余分なスペースを吸収できることはわかっています（「flex-direction」の値が「row」の場合、行の余分なスペースは吸収されます）。

しかし、これらのアイテムをラップするとどうなりますか? 2 行目の項目は、2 行目の余分なスペースを吸収するだけです。ただし、縦方向のスペースがあったとしても吸収しません。

たぶん、デモはあなたが私をより明確に理解できるようにするかもしれません.

.container {
    display:-webkit-flex;
    -webkit-flex-flow:row wrap;
    width: 350px; /*just for demo, it should be the same width as the browser*/
}
.item {
    width:100px; /*All these items have the same width*/
    height:200px;
    border:1px solid;
    margin:5px;
}
.item:nth-child(even) {
    height:100px;
}

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

item2の直後にitem5ができるといいのですが。マージン以外に余分なスペースはありません。

誰かがそれを理解するのを手伝ってくれますか?

4

2 に答える 2

0

デフォルトでは、フレックス コンテナーのデフォルト値により、フレックス アイテムは交差軸(行方向に対して垂直) に沿って伸縮します。align-items: stretchただし、フレックス アイテムに明示的な高さがある場合は、伸縮性がオーバーライドされます。

http://jsfiddle.net/farpK/5/

両方のheightプロパティをに変更するとmin-height、必要に応じてストレッチが開始されます。

于 2013-03-15T12:26:37.120 に答える