Flexboxだけで次のレイアウトを作成できますか？または、推奨される方法は何ですか？レイアウトを作成するには、3番目の子が全幅ですか？
例コード（APIから画像を取得）：
<div class="container">
{images.map(image => {
return(
<div class="item">
<img src={image.thumbnail} />
</div>
);
})}
</div>
例CSS：
.container {
display: flex;
flex-flow: row wrap;
}
img:nth-child(3) {
flex: 1 100%;
}
は、単にあなたの第三のフレックス項目
追加にflex-basis: 100%を設定ルールを設定するルールimg o width: 100%はサイズを正しく設定します。最高のクロスブラウザのサポートのためにも
、あなたのCSSの作品各img
.container {
display: flex;
flex-flow: row wrap;
}
.item {
background: lightgray;
flex-basis: calc(50% - 10px);
margin: 5px;
}
.item:nth-child(3) {
flex-basis: calc(100% - 10px);
}
.item img {
width: 100%;
}<div class="container">
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
</div>の周りにラッパーを保つ、あなたはちょうど2つを取得するために他のイメージのための追加ルールが必要DIVには同じ規則を適用して、すべての画像幅を100％に設定するだけです）
.container {
display: flex;
flex-flow: row wrap;
}
img {
box-sizing: border-box;
width: 50%;
padding: 10px;
}
img:nth-child(3) {
flex: 1 100%;
}<div class="container">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
</div>は、たぶん私はあなたが望むものを正しく理解していないが、ここでは、次のとおりです。
はjsFiddleを参照するかで
.container {
display: flex;
flex-flow: row wrap;
}
img {
height:auto;
flex:1 50%;
}
img:nth-child(3) {
flex: 1 100%;
}<div class="container">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
</div>の下スニペットあなたは私がやっているあなたの例g：nth-child（3）しかし、画像はdivでラップされます。あなたのイメージはフレックスチャイルドではありません。ここにあなたの問題の可能なソリューションです。
.container {
display: flex;
flex-wrap: wrap;
}
.container div{
width: 50%;
/* just for demonstration, not needed: */
text-align:center;
margin-bottom: 10px;
background-color: #eee;
border: 2px solid white;
box-sizing: border-box;
}
.container div:nth-child(3) {
width: 100%;
}<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
これらのボックスには、順序を持っているか、ないのですか？あなたはそれらを整理する必要がありますか、それはどのように行われますか？ – SkryptX
ランダムな順序です。 – userden