1

ボックスを動的に作成するレイアウトにフレックスボックスプロパティを使用したかったのです。

だから私はカウントごとに自分自身（ボックス）を調整したい. ボックスが 1 つしかない場合のように、完全に 100% のスペースが必要で、最大 3 つのボックスが 1 列に配置されます。4 番目のボックスが画面に表示されると、自動的に次の行に移動します。

flex-flow についてよく検索しましたが、適切な解決策が見つかりませんでした。

助けてください。

よろしく

4

1 に答える 1

2

現在、新しい構文、Chrome (プレフィックスが必要) および Opera のみを使用:

#container {
    display: flex;
    flex-flow: row wrap;
}

#container > * {
    flex: 1 1 33%;
}

ここにデモがあります: http://jsfiddle.net/lpd_/qwwT8/。最初の行がいっぱいになったら、後続の行のアイテムが伸びないようにしたい場合は、次を追加できます。

#container > *:nth-child(n+4) {
    max-width: 33.33%;
    max-width: calc(100% / 3); /* To override and be more precise, if you wish */
}
于 2012-11-19T02:25:22.100 に答える