Alors, imaginez que j'ai les balises suivantes
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Et les styles suivants (SASS)
@mixin max-width($width) {
@media screen and (max-width: $width) {
@content;
}
}
.container {
display: flex;
@include max-width(992px) {
number: 4; //Hypothetical property that is supposed to control number per row
}
@include max-width(640px) {
number: 2; //Hypothetical property that is supposed to control number per row
}
}
.item {
background-color: tomato;
padding: 20px;
margin-right: 20px;
flex: 1;
}
Existe-t-il une réelle alternative Flexbox CSS à ma propriété hypothétique number
pouvant contrôler le nombre d'éléments à afficher par ligne?).
La grille de type float était pratique car vous pouviez utiliser un nombre illimité de .items
par un .row
à cause de width
. Mais avec flexbox je dois utiliser des solutions de contournement telles que de nombreuses .row
classes pour contrôler la disposition et le nombre d'éléments de différentes largeurs. J'ai eu de la chance jusqu'à présent, mais il existe un certain type de mise en page qui échouera avec une telle approche.
Je devais me débarrasser de la marge autour des blocs, car les pourcentages de largeur sont difficiles à appliquer proprement aux éléments avec des marges, mais vous pouvez voir les modifications sur http://codepen.io/anon/pen/jPeLYb? éditeurs = 11 :
@mixin max-width($width) {
@media screen and (max-width: $width) {
@content;
}
}
.container {
position: relative;
display: flex;
flex-flow: row wrap;
}
.item {
background-color: tomato;
box-sizing: border-box;
padding: 20px;
outline: 2px solid blue;
flex: 1;
}
@include max-width(992px) {
.item {
flex-basis: 25%;
background-color: red;
}
}
@include max-width(640px) {
.item {
flex-basis: 50%;
background-color: green;
}
}
Les parties importantes ici sont:
flex-flow: row wrap
qui permet à flexbox d'apparaître sur plusieurs lignes (la valeur par défaut est nowrap
)
flex-basis
qui est l’équivalent de width
dans ce cas
position: relative
qui fait les largeurs par rapport au conteneur plutôt que par rapport au corps (cela ferait foirer l’arrondi)