ラップ後にフレックスアイテムを適切な列に保持する

Question

justify-contentを使用してコンテナ内のdivを正しく正当化しようとしていますが、このオプションは期待通りの動作をしていません。

1 2 3 
4 5 

なく好き：私はそうのように私の例の2行目の秩序を維持するためにコンテナ内に私のdivのを望ん

1 2 3 
4  5 

.container { 
 
    display: flex; 
 
    width: 1100px; 
 
    justify-content: space-between; 
 
    flex-wrap: wrap; 
 
} 
 
.container > div { 
 
    width: 330px; 
 
    height: 125px; 
 
    background-color: rgba(18, 28, 41, 0.50); 
 
    border: 1px solid #325E82; 
 
}

<div class="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Codepen：https://codepen.io/anon/pen/pryWYZ

Answer 1

1つの解決策は、疑似セレクタ::afterを使用して、他の要素と同じ幅を占める偽の「目に見えない」要素を作成します。 justify-contentと組み合わせることで、これは既存の最後の要素が中央に移動されます：

.container { 
 
    display: flex; 
 
    width: 1100px; 
 
    justify-content: space-between; 
 
    flex-wrap: wrap; 
 
} 
 

 
.container > div { 
 
    width: 330px; 
 
    height: 125px; 
 
    background-color: rgba(18, 28, 41, 0.50); 
 
    border: 1px solid #325E82; 
 
} 
 

 
.container::after { 
 
    content: ''; 
 
    width: 332px; /* .container > div 'width' plus .container > div 'border' */ 
 
}

<div class="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

私はこのhereのCodePenをも作成しました。

希望すると便利です。 :)その周り

Answer 2

もう一つの方法は、.Containerにjustify-content: flex-start;を持っていると列の所望の数に応じて、そしてお子様の上のサイズを制限する正しい子項目にマージンを指定することです。 3列のグリッドの

、このような何か：

.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: flex-start; 
 
} 
 

 
.item { 
 
    background-color: gray; 
 
    width: 100px; 
 
    height: 100px; 
 
    flex: 0 0 32%; 
 
    margin: 1% 0; 
 
    
 
    } 
 
    
 
    .item:nth-child(3n-1) { 
 
    margin-left: 2%; 
 
    margin-right: 2%; 
 
    } 
 

<div class="container"> 
 
    <div class=item></div> 
 
    <div class=item></div> 
 
    <div class=item></div> 
 
    <div class=item></div> 
 
    <div class=item></div> 
 
    
 
</div>

Answer 3

フレキシボックスは完璧なグリッドを作成するために設計されていません。そのため、最終行のフレックスアイテムを整列させることは自然な解決策ではありません。あなたはそれを動作させるためにハッキングが必要です。

これは、これらの記事で詳しく説明されています

• Is it possible for flex items to align tightly to the items above them?
• Targeting flex items on the last row
• Properly sizing and aligning the flex item(s) on the last row

この問題を解決するための理想的な方法は、グリッドにフレックスレイアウトを切り替えることであろうレイアウト。 CSSグリッドレイアウトでは、コンテンツアイテムの配置とサイジングをより詳細に制御できます。上記のプロパティおよびブラウザのサポートデータの説明など、CSSグリッドの詳細については、

.container { 
 
    display: grid; 
 
    grid-auto-rows: 125px; 
 
    grid-template-columns: repeat(auto-fill, 330px); 
 
    grid-gap: 10px; 
 
    width: 1100px; 
 
} 
 

 
.container>div { 
 
    background-color: rgba(18, 28, 41, 0.50); 
 
    border: 1px solid #325E82; 
 
}

<div class="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

は、この記事を参照してください。 CSS-only masonry layout but with elements ordered horizontally