私はそれはかなりうまく動作側フレキシボックスオーダー水平
<div class="artist-wrapper">
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
</div>
.artist-wrapper {
display: flex;
height: 100%;
width: 100%;
}
.artist {
flex: 1;
height: 100%;
}
によっていくつかの要素側を配置するフレキシボックスを使用しています！小さな画面（モバイルのような）では、.artist要素は横並びではなく、お互いの間にあるべきです。フレックスボックスを使ってこれを行う方法はありますか？
メディアクエリーが必要な場合は、親のラッピングを許可します。
.artist-wrapper {
display: flex;
height: 100%;
width: 100%;
}
.artist {
flex: 1;
height: 100px;
border: 1px solid grey;
}
@media screen and (max-width: 480px) {
.artist-wrapper {
flex-wrap: wrap;
}
.artist {
flex: 0 0 100%
}
}<div class="artist-wrapper">
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
</div>メディアのクエリの必要はありません、ちょうど分の幅を追加：400px;子供用とフレックスラップ用：ラップ;コンテナ用メディアクエリは、これほど多くのコードを追加します。そのような混乱を維持するのは難しいです。 –
本当ですか？ハードコーディングされた値を追加したいのです...それはより保守的です...私はそう思わないでしょう。 –
これを変数で追加する... LOL、メディアクエリは、同じこと以上の2倍のコードを書くよう強制します。 –
Is this what you are after?これはdisplay: inline-block
を使用してしかし、ここでsolution using flexboxあり、このためのプロパティがflex-wrap: wrapで、あなたはmin-widthとmin-heightを削除した場合、あなたは持っていることができていますより流動的なレイアウト。
min-widthをmediaqueriesの代わりに使用することもできます。
（コメントを参照してください）
.artist-wrapper {
display: flex;
flex-wrap:wrap;
}
.artist {
flex:1;
min-width:250px;/* whatever breaking points you look for : here we have for 3 elements a first-breakpoint at 500px then another at 250 */
min-height: 50px;/* demo purpose use content instead*/
box-shadow:0 0 0 1px gray;
}
/* extra */
.artist-wrapper {
margin:1em;
}
.artist {
color:#444;
font-size:1.5em;
font-family:'lucida console', courier;
background:tomato;
display:flex;
align-items:center;
justify-content:center;
}
.artist:nth-child(odd) {
background:orange
}
.artist:nth-child(4n) {
background:turquoise;
min-width: 500px;
max-width:100%;/* allows it to shrink on small device , can be set to all of them */
}<div class="artist-wrapper">
<div class="artist"></div>
<div class="artist">breaks at 250px;</div>
<div class="artist"> breaks at 500px </div>
</div>
<div class="artist-wrapper">
<div class="artist"></div>
<div class="artist">breaks at 250px;</div>
<div class="artist">breaks at 500px;</div>
<div class="artist"> breaks at 1250px;</div>
<div class="artist"> and so on ... </div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
<div class="artist"></div>
</div>
あなたは*お互いの間で*とはどういう意味ですか？あなたはおそらくメディアクエリを必要とします.... –
1つの要素は、他の要素の下にある必要があります。うん！しかし、私はCSSフレックスボックスのコマンドが必要です... – Jonas