Flexbox bestellen horizontal

Question

Ich Flexbox mit einander einige Elemente Seite zu platzieren

<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%; 
} 

Es funktioniert ziemlich gut! Auf kleinen Bildschirmen (wie Mobile) sollten die .artist-Elemente nicht nebeneinander, sondern untereinander stehen. Gibt es eine Möglichkeit, dies mithilfe von Flexbox zu tun?

Answer 1

Sie benötigen Medienabfragen und können dann im übergeordneten Element umbrechen.

JSFiddle Demo

.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>

Answer 2

Is this what you are after? Dies ist mit display: inline-block

Aber hier ist ein solution using flexbox, die Eigenschaft für diese flex-wrap: wrap ist, wenn Sie min-width entfernen und min-height Sie können eine haben flüssigeres Layout.

Answer 3

Sie können stattdessen min-width oder mit Mediaqueries verwenden.

(siehe Kommentare)

.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>