フレックスボックスアイテムを複数行にすることはできますか？

Question

私はCSSのフレキシボックスを使用して、この正確なUIを実現したい：

私のDOMは次のようになります。その他の項目は短いながら、いくつかの項目が複数行であることが十分な長さであることを

<container> 
    <item>The</item> 
    <item>Quick</item> 
    <item>brown fox jumps over the lazy</item> 
    <item>dog</item> 
</container> 

をお知らせ彼らは同じ行にすべきである。

あり、このUIを達成するために、私が知っている唯一の方法だと、それは項目間の空白を除去することである：

<container> 
    <item>The</item><item>Quick</item><item>brown fox jumps over the lazy</item><item>dog</item> 
</container> 

<style> 
container { 
    max-width: 150px; 
    display: block; 
} 

item { 
    color: white; 
    padding: 7px; 
    line-height: 2.0; 
    display: inline; 
} 

item:nth-child(1) { 
    background: red; 
} 

item:nth-child(2) { 
    background: green; 
} 

item:nth-child(3) { 
    background: orange; 
} 

item:nth-child(4) { 
    background: blue; 
} 
</style> 

これは、2つのアカウントに望まれることに何かを残し：

1. すべての項目を強制的に1行にすると、特に複雑なシナリオでは、DOMを読みにくくなります。
2. 希望の高さになるには線の高さを変更する必要があります。

代わりにCSS Flexboxを使用してこの正確なUIを達成したいと思いますが、Flexboxにこのような複数の行を折り返す方法を見つけることができません。出来ますか？

Answer 1

あなたがflexboxを使って尋ねたことを達成し、同じhtml構造を維持するのは複雑な方法ですが、まったく可能ではありません。あなたは異なる行のcan't just break a flex-item to wrapです。ラップしたい場合は、最初にbe a seperate itemにする必要があります。

これを達成するためにどのように使用できるかを示すためにhtmlを変更しました。

container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
break { 
 
    flex-basis: 100%; 
 
    width: 0px; 
 
    height: 0px; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
} 
 

 
item:nth-child(n+1) { 
 
    background: red; 
 
} 
 

 
item:nth-child(n+2) { 
 
    background: green; 
 
} 
 

 
item:nth-child(n+3){ 
 
    background: yellow; 
 
} 
 
item:nth-child(n+8){ 
 
    background: blue; 
 
}

<container> 
 
    <item>The</item> 
 
    <item>Quick</item> 
 
    <item>brown</item> 
 
    <break></break> 
 
    <item>fox jumps over the </item> 
 
    <break></break> 
 
    <item>lazy</item> 
 
    <item>dog</item> 
 
</container>