フレックスでこのレイアウトを実現する方法

Question

私はフレックスを使ってダイナミックダッシュボードのレイアウトを行っています。大・小：しかし、その行動は時々私のために謎のビットです...

はのは、私がブロックの2つの種類があるとしましょう。

のように...

これまでのところ、私は一般的な「フロート」動作を達成している：レイアウトはこのように見えるようにするためにブロックの数に応じて、私は希望しますしかし、私はどこにも行きませんし、フレックスを正しい方法で使用しているわけではありません。誰かが私を助けてくれますか？感謝:)ここ

Answer 1

.row { 
 
    border: none; 
 
    display: flex; 
 
} 
 

 
.row .small { 
 
    height: 50px; 
 
    margin: 5px 5px 0 0; 
 
    border: solid 1px black; 
 
} 
 

 
.row .big { 
 
    flex: 3; 
 
    margin: 5px 5px 0 0; 
 
    border: solid 1px black; 
 
} 
 

 
.row div { 
 
    flex: 1; 
 
}

<div class="row"> 
 
    <div class="big"></div> 
 
    <div> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
</div>

はflexboxesと小さな例ですが、あなたは、グリッドを使用して検討するかもしれません！ （答えをさらに読む）。 各フレックスボックスは無用にレンダリングされるため、アライメントは完璧ではありません。ここで

は、それが基本的にどのように動作するかです：フレキシボックスの内側に、それぞれの子はflexプロパティを使用して比率を与えることができます。

"big divs"にはflex: 3、他にはflex: 1を与えているので、大きなdivは幅の3 /（3 + 1）になりますが、1の場合は1 /（3 + 1） （フレックス値を子供のフレックス値の合計で割った値） 下の行については、各divにflex: 1を渡すので、それぞれの幅は1 /（1 + 1 + 1 + 1）になります。グリッドレイアウトについて

、私は非常にそれを知らないと、あなたの質問はフレキシボックスについてですから、私はflexboxesと答えたが、私はあなたがそれをレイアウトのそれらの種類の試みを与えるべきだと思う： https://css-tricks.com/snippets/css/complete-guide-grid/

より複雑ですが、より強力です。

これが役に立ちます。