我使用Flexbox的並排Flexbox的序位水平
<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-elements不應該並排存在，而應該放在彼此之間。有沒有辦法通過使用flexbox來做到這一點？
您需要媒體查詢，然後允許包裝在父級中。
.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>不需要媒體查詢，只需添加min-width：400px;用於兒童和柔性包裝：包裝;爲容器。媒體查詢增加了更多的代碼。維持這樣的混亂很難。 –
真的嗎？你想添加一個硬編碼的值...這更容易維護......我想不是。 –
添加變量...大聲笑，媒體查詢強制爲相同的事情寫入2x代碼，甚至更多。 –
Is this what you are after?這是使用display: inline-block
但這裏是一個solution using flexbox，這個屬性是flex-wrap: wrap，如果您刪除min-width和min-height你可以有一個更流暢的佈局。
您可以使用min-width代替或使用媒體查詢。
（見註釋）
.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>
你說的*彼此之間意味着*？您可能需要媒體查詢.... –
一個元素應該位於另一個元素的下面。是啊！但我需要CSS flexbox命令... – Jonas