複数のフレックスアイテムが折り返されたときのスペース（空白）を取り除きます

Question

高さが設定されたコンテナ内に複数のアイテムを置いてみようとしています。スペースが残っていない場合、アイテムは互いに隣り合うようになります。

これはアイデアです：

私はこの使用してフレキシボックスを達成しようとしています、セットの高さを持つコンテナ、方向がcolumnとflex-wrapに設定されているがwrapです：

問題列間に広いギャップがあるということです。

私はflex-startにjustify-contentとalign-itemsの両方を設定してみましたが、それはおそらくデフォルト値です。

これを解決する方法はありますか？ここで

はコードです：

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    font-family: sans-serif; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    height: 300px; 
 
    flex-direction: column; 
 
    background-color: #ccc; 
 
} 
 
.items { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    background-color: tomato; 
 
    color: white; 
 
    font-size: 60px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    padding: 15px; 
 
}

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

​​

Answer 1

フレックスコンテナの初期設定はalign-content: stretchです。

これは、フレックスアイテムの複数の行が交差軸に沿って均等に配分されることを意味します。

この動作を無効にするには、align-content: flex-startをコンテナに適用します。

---

もし単線​​フレックス容器（即ち、flex-wrap: nowrap）で作業している場合、交差軸に沿って空間を配布するために使用するプロパティがalign-itemsとalign-selfあります。クロス軸に沿っフレックスライン（行/列）を配布するために使用するプロパティ問題–のよう

あなたはマルチラインフレックスコンテナ（すなわち、flex-wrap: wrap）で作業している–align-contentです。

8.3. Cross-axis Alignment: the align-items and align-self properties

匿名フレックス項目を含むフレックスコンテナの項目のすべてのデフォルトの配置を設定しますalign-items：スペックから

。 align-selfは、このデフォルトアラインメントを個々のフレックスアイテムでオーバーライドすることができます。justify-contentはメイン軸内の個々のアイテムを整列する方法 に似たクロス軸に余分なスペースがあるとき

8.4. Packing Flex Lines: the align-content property

align-contentプロパティは フレックスコンテナ内フレックスコンテナのラインを揃えます。 このプロパティは、単一行のフレックスコンテナには影響しません。

• flex-start
• flex-end
• center
• space-between
• space-around
：

align-contentプロパティは6つの値をとります210

stretch

ここstretchの定義です：

stretch

行は、残りのスペースを取るためにストレッチ。残りの空き領域が負の場合、この値はflex-startと同じです。それ以外の場合は、自由空間がすべての線の間で均等に分割され、その交差サイズが拡大されます。

つまり、十字軸のalign-content: stretchは、主軸のflex: 1に似ています。