CSSのレンガレイアウト

Question

CSSの添付画像のようなレンガレイアウトを2日間作成してみました。私はいくつかのコードを書かれているこのようなレイアウトを実現するために添付された画像

を参照してください。私は

.photo-row { 
    width: 100%; 
    height: 200px; 
} 
.photo-row.first div { 
    display: inline-block; 
    height: 100%; 
} 
.first-item-1 { 
    width: 13.57%; 
    background: red; 
} 
.first-item-2 { 
    width: 19.21%; 
    background: green; 
} 
.first-item-3 { 
    width: 31.21%; 
    background: orange; 
} 
.first-item-4 { 
    width: 15.14%; 
    background: blue; 
} 
.first-item-5 { 
    width: 19.78%; 
    background: yellow; 
} 

アイデアは、それぞれが一定の割合の幅をDIV与えることでした、次のHTML

<div class="photo-row first"> 
    <div class="first-item-1"></div> 
    <div class="first-item-2"></div> 
    <div class="first-item-3"></div> 
    <div class="first-item-4"></div> 
    <div class="first-item-5"></div> 
</div> 

とCSSを使用して（単語「レッツ」と行）最初の行を複製しようとしています親のdivの中にあるので、それらはレンガ形式で整列して応答します。そして、私は各子供たちに背景画像を与えようとしていました。私のレイアウトは動作しますが、いくつかのビューポートではブレークし、最後の子divは2行目にシフトします。

I持ってもこれを実証するためのcodepenデモを行います。https://codepen.io/Ali_Farooq_/pen/oobBYj

.photo-row { 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
.photo-row.first div { 
 
    display: inline-block; 
 
    height: 100%; 
 
} 
 

 
.first-item-1 { 
 
    width: 13.57%; 
 
    background: red; 
 
} 
 

 
.first-item-2 { 
 
    width: 19.21%; 
 
    background: green; 
 
} 
 

 
.first-item-3 { 
 
    width: 31.21%; 
 
    background: orange; 
 
} 
 

 
.first-item-4 { 
 
    width: 15.14%; 
 
    background: blue; 
 
} 
 

 
.first-item-5 { 
 
    width: 19.78%; 
 
    background: yellow; 
 
}

<div class="photo-row first"> 
 
    <div class="first-item-1"></div> 
 
    <div class="first-item-2"></div> 
 
    <div class="first-item-3"></div> 
 
    <div class="first-item-4"></div> 
 
    <div class="first-item-5"></div> 
 
</div>

私にもかかわらず、子供のdiv要素の合計が100％未満に等しいことを理解することはできません

親、なぜ彼らが2番目の行に移動します。もう1つは...私はレイアウトのデザインをしようとしているので、左または右のどちらにも空白がありません。もし誰かがJavaScript/jQueryでこれに対する解決策を持っていれば、それも私のために働くでしょう。

ありがとうございます！

Answer 1

display:flexを使用すると、壁のような「レンガ」を簡単に作成できます。また、flex-growプロパティを使用すると、パーセントを使用するよりもはるかに簡単にコンテナの幅を制御できます。

ちょうどキックのために、あなたが一緒に遊ぶことができる例があります。レンガタイプのnthにあるflex-growの値を変更すると、よりランダムなパターンも作成できます。それは完全に柔軟です。

プラスフレックスボックスを使用すると、 "ブリック"にalign-itemsとjustify-contentを使用して、テキストの配置をより簡単に制御できます。

ここでは、すべてのレンガを基本的にflex-grow: 2に設定しています。同じように、それらはすべて同じサイズに曲がり、各行で同じ量のスペースを占有します。次に、疑似セレクタを使用して、偶数行とその偶数行の最初と最後のブリックを見つけ、flex-grow:1（または2つのうちの半分）を作成して両端に半分のレンガを作成することができます。

.wall { 
 
    height: auto; 
 
    } 
 
.row { 
 
    display: flex; 
 
    border-top: 2px solid white; 
 
} 
 

 
.row .brick { 
 
    flex-grow: 2; 
 
} 
 

 
.row .brick:not(:last-child) { 
 
    border-right: 2px solid white; 
 
} 
 

 
.row:nth-child(even) > .brick:first-child, 
 
.row:nth-child(even) > .brick:last-child { 
 
    flex-grow: 1; 
 
} 
 

 
.brick { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: red; 
 
    height: 50px; 
 
    color: #fff; 
 
    font-family: Helvetica, sans-serif; 
 
    font-size: 12px; 
 
}

<div class="wall"> 
 
    <div class="row"> 
 
    <div class="brick"></div> 
 
    <div class="brick">Lets</div> 
 
    <div class="brick"></div> 
 
    <div class="brick">Make</div> 
 
    <div class="brick"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="brick"></div> 
 
    <div class="brick">The</div> 
 
    <div class="brick"></div> 
 
    <div class="brick">World</div> 
 
    <div class="brick"></div> 
 
    <div class="brick"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="brick"></div> 
 
    <div class="brick"></div> 
 
    <div class="brick">Suck</div> 
 
    <div class="brick">Less</div> 
 
    <div class="brick"></div> 
 
    </div> 
 
</div>