Flex-box: Aligner la dernière ligne à la grille
J'ai une mise en page simple flex-box avec un conteneur comme:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
Maintenant, je veux que les éléments de la dernière ligne soient alignés avec l'autre. justify-content: space-between; doit être utilisé car la largeur et la hauteur de la grille peuvent être ajustées.
Actuellement, il ressemble à
Ici, je veux que l’article en bas à droite soit dans la "colonne du milieu". Quel est le moyen le plus simple d'accomplir cela? Voici un petit jsfiddle qui montre ce comportement.
.exposegrid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
</div>Ajoutez un ::after qui remplit automatiquement l’espace. Pas besoin de polluer votre HTML. Voici un code le montrant: http://codepen.io/DanAndreasson/pen/ZQXLXj
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
flex: auto;
}
Une technique consiste à insérer un nombre d'éléments supplémentaires (autant que le nombre maximal d'éléments attendus dans une ligne) auxquels une hauteur nulle est attribuée. L'espace est toujours divisé, mais les lignes superflues ne disparaissent plus:
http://codepen.io/dalgard/pen/Dbnus
body {
padding: 5%;
}
div {
overflow: hidden;
background-color: yellow;
}
ul {
display: flex;
flex-wrap: wrap;
margin: 0 -4px -4px 0;
list-style: none;
padding: 0;
}
li {
flex: 1 0 200px;
height: 200px;
border-right: 4px solid black;
border-bottom: 4px solid black;
background-color: deeppink;
}
li:empty {
height: 0;
border: none;
}
*,
:before,
:after {
box-sizing: border-box;
}<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>À l'avenir, cela pourrait devenir réalisable en utilisant plusieurs ::after(n) .
Comme d'autres affiches l'ont mentionné - il n'y a pas de moyen propre d'aligner à gauche la dernière ligne avec la flexbox (au moins selon les spécifications actuelles)
Cependant, pour ce qui en vaut la peine: avec le module de mise en page de grille CSS , il est étonnamment facile à produire:
Fondamentalement, le code pertinent se résume à ceci:
ul {
display: grid; /* 1 */
grid-template-columns: repeat(auto-fill, 100px); /* 2 */
grid-gap: 1rem; /* 3 */
justify-content: space-between; /* 4 */
}
1) Faire de l’élément conteneur un conteneur de grille
2) Définissez la grille avec des colonnes automatiques de largeur 100px. (Notez l’utilisation de auto-fill (comme indiqué dans auto-fit - qui (pour une disposition à une ligne) réduit les pistes vides à 0 - ce qui entraîne le développement des éléments pour occuper l’espace restant. "Espace-entre" justifié lorsque la grille ne comporte qu'une seule ligne, ce qui dans notre cas n'est pas ce que nous souhaitons (consultez this demo pour voir la différence entre elles)).
3) Définissez les espaces/gouttières pour les lignes et les colonnes de la grille - ici, puisque vous souhaitez une disposition "espace-entre", l'espace sera en réalité un espace minimum car il s'agrandira au besoin.
4) Similaire à la flexbox.
ul {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 1rem;
justify-content: space-between;
/* boring properties */
list-style: none;
background: wheat;
padding: 2rem;
width: 80vw;
margin: 0 auto;
}
li {
height: 50px;
border: 1px solid green;
}<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>Codepen Demo (redimensionner pour voir l'effet)
Sans aucun balisage supplémentaire, ajouter simplement ::after a fonctionné pour moi en précisant la largeur de la colonne.
.grid {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
.grid::after{
content: '';
width: 10em // Same width of .grid__element
}
.grid__element{
width:10em;
}
Avec le HTML comme ceci:
<div class=grid">
<div class="grid__element"></div>
<div class="grid__element"></div>
<div class="grid__element"></div>
</div>
Tu ne peux pas. Flexbox n'est pas un système de grille. Il n'a pas les constructions de langage pour faire ce que vous demandez, du moins pas si vous utilisez justify-content: space-between. Flexbox vous permet de vous rapprocher de l'orientation des colonnes, ce qui nécessite de définir une hauteur explicite:
http://cssdeck.com/labs/pvsn6t4z (note: les préfixes ne sont pas inclus)
ul {
display: flex;
flex-flow: column wrap;
align-content: space-between;
height: 4em;
}
Cependant, il serait plus simple de n'utiliser que des colonnes, qui offrent une meilleure prise en charge et ne nécessitent pas de définition de hauteur spécifique:
http://cssdeck.com/labs/dwq3x6vr (note: les préfixes ne sont pas inclus)
ul {
columns: 15em;
}
Une solution possible consiste à utiliser justify-content: flex-start; sur le conteneur .grid, les restrictions de taille sur ses enfants et les marges sur les éléments enfants appropriée, selon le nombre de colonnes souhaité.
Pour une grille à 3 colonnes, le CSS de base ressemblerait à ceci:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid > * {
flex: 0 0 32%;
margin: 1% 0;
}
.grid > :nth-child(3n-1) {
margin-left: 2%;
margin-right: 2%;
}
C'est une autre solution imparfaite, mais cela fonctionne.
Si vous souhaitez aligner le dernier élément sur la grille, utilisez le code suivant:
Conteneur de grille
.card-grid {
box-sizing: border-box;
max-height: 100%;
display: flex;
flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.card-grid:after {
content: "";
flex: 1 1 100%;
max-width: 32%;
}
Article dans la grille
.card {
flex: 1 1 100%;
box-sizing: border-box;
-webkit-box-flex: 1;
max-width: 32%;
display: block;
position: relative;
}
L'astuce consiste à définir la largeur maximale de l'élément égale à la largeur maximale de la grille .card: after.
Oui.! Nous pouvons mais avec certaines requêtes de média & Le nombre maximum de colonnes est prédéfini .
Ici, j'utilise 4 colonnes. Vérifiez mon code:
.container {
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
}
.container .item {
display: flex;
display: -webkit-flex;
display: -moz-flex;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
flex-basis: 25%; //max no of columns in %, 25% = 4 Columns
}
.container .item .item-child {
width: 130px;
height: 180px;
background: red;
margin: 10px;
}
@media (max-width: 360px) {
.container .item {
flex-basis: 100%;
}
}
@media (min-width:360px) and (max-width: 520px) {
.container .item {
flex-basis: 50%;
}
}
@media (min-width:520px) and (max-width: 680px) {
.container .item {
flex-basis: 33.33%;
}
}<div class="container">
<div class="item">
<div class="item-child">1</div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
</div>REMARQUE
1) Pas besoin de créer un enfant div. Ce peut être n'importe quel autre tag comme 'img' r comme vous voulez.
2) Si vous voulez plus de colonnes, ajustez les requêtes de média et le nombre maximum de colonnes.
Si vous voulez une grille avec un espace entre les éléments et les éléments commençant sans espace initial, cette solution simple fonctionne:
.grid {
display: flex;
flex-flow: row wrap;
margin: 0 -5px; // remove the inital 5px space
width: auto;
}
.grid__item {
width: 25%;
padding: 0 5px; // should be same as the negative margin above.
}
Si vous voulez l’espace initial de 5 pixels, supprimez simplement la marge négative :) Simple.
https://jsfiddle.net/b97ewrno/2/
La réponse acceptée, bien que bonne, fait en sorte qu'il n'y ait pas d'espace entre les éléments de la deuxième ligne.
Il est possible d'utiliser "flex-start" et d'ajouter les marges manuellement. Cela nécessite un peu de math-hacking mais est certainement facile à faire et le rend facile à utiliser avec un pré-processeur CSS comme LESS.
Voir par exemple ce mixin MOINS:
.flexboxGridMixin(@columnNumber,@spacingPercent) {
@contentPercent: 100% - @spacingPercent;
@sideMargin: @spacingPercent/(@columnNumber*2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
> * {
box-sizing: border-box;
width: @contentPercent/@columnNumber;
margin-left: @sideMargin;
margin-right: @sideMargin;
}
}
Et puis, il peut facilement être utilisé pour afficher une disposition de grille réactive:
ul {
list-style: none;
padding: 0;
@spacing: 10%;
@media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
@media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
@media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
@media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
@media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}
li {
background: pink;
height: 100px;
margin-top: 20px;
}
Voici un exemple de
Cette version est la meilleure solution pour les blocs de largeur fixe:
http://codepen.io/7iomka/pen/oxxeNE
Dans les autres cas - version de dalgard
http://codepen.io/dalgard/pen/Dbnus
body {
padding: 5%;
}
div {
overflow: hidden;
background-color: yellow;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content:center;
margin: 0 -4px -4px 0;
list-style: none;
padding: 0;
}
li {
flex: 1 0 200px;
height: 200px;
max-width:200px;
min-width:200px;
border-right: 4px solid black;
border-bottom: 4px solid black;
background-color: deeppink;
}
li:empty {
height: 0;
border: none;
}
*,
:before,
:after {
box-sizing: border-box;
}<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>Si vous connaissez la largeur des espaces entre les éléments de la ligne et la quantité d'éléments dans une ligne, cela fonctionnerait:
Exemple: 3 éléments dans une rangée, intervalle de 10 pixels entre les éléments
div:last-child:nth-child(3n+2) {
flex-grow: 1
margin-left: 10px
}
Il existe un moyen de ne pas utiliser de boîte flexible, bien que vous deviez remplir les conditions suivantes. 1) Le conteneur a un rembourrage. 2) Les articles ont la même taille et vous savez exactement combien vous voulez par ligne.
ul {
padding: 0 3% 0 5%;
}
li {
display: inline-block;
padding: 0 2% 2% 0;
width: 28.66%;
}
Le rembourrage plus petit sur le côté droit du conteneur permet d'ajouter un rembourrage à droite de chaque élément de la liste. En supposant que les autres éléments du même parent que l’objet de liste soient remplis avec 0 5%, il leur sera associé. Vous pouvez également ajuster les pourcentages selon la marge désirée ou utiliser les valeurs de calcul px.
Bien sûr, vous pouvez faire la même chose sans le remplissage du conteneur en utilisant nth-child (IE 9+) pour supprimer la marge sur chaque troisième case.
C’est une combinaison de beaucoup de réponses, mais c’est exactement ce dont j'avais besoin: aligner le dernier enfant dans un conteneur Flex vers la gauche tout en maintenant l’espace entre les deux disposition).
Voici le balisage:
.flex-container {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.flex-container:after {
content: "";
flex-basis: 30%;
}
Vous pouvez y parvenir simplement avec flex-start et max-width.
https://codepen.io/moladukes/pen/NvzBrQ
.container {
display: flex;
justify-content: flex-start;
flex-flow: row wrap;
}
.item {
width: 130px;
max-width: 130px;
height: 180px;
background: red;
margin: 20px;
}
En utilisant flexbox et quelques requêtes de médias, j'ai créé ce petit problème: http://codepen.io/una/pen/yNEGjv (c'est un peu compliqué mais ça marche):
.container {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
max-width: 1200px;
margin: 0 auto;
}
.item {
background-color: gray;
height: 300px;
flex: 0 30%;
margin: 10px;
@media (max-width: 700px) {
flex: 0 45%;
}
@media (max-width: 420px) {
flex: 0 100%;
}
&:nth-child(3n-1) {
margin-left: 10px;
margin-right: 10px;
}
}
C'est joli hacky, mais cela fonctionne pour moi. J'essayais d'obtenir un espacement/des marges constants.
.grid {
width: 1024px;
display: flex;
flex-flow: row wrap;
padding: 32px;
background-color: #ddd;
&:after {
content: "";
flex: auto;
margin-left:-1%;
}
.item {
flex: 1 0 24.25%;
max-width: 24.25%;
margin-bottom: 10px;
text-align: center;
background-color: #bbb;
&:nth-child(4n+2),
&:nth-child(4n+3),
&:nth-child(4n+4) {
margin-left: 1%;
}
&:nth-child(4n+1):nth-last-child(-n+4),
&:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
margin-bottom: 0;
}
}
}
http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/
Voici un autre couple de mixins scss.
Ces mixins supposent que vous n'utiliserez pas de plug-ins js comme Isotope (ils ne respectent pas l'ordre des balises html, ce qui perturbe les règles de sécurité).
En outre, vous pourrez en tirer pleinement parti, en particulier si vous écrivez vos points d'arrêt réactifs de manière mobile. Vous utiliserez idéalement flexbox_grid () sur le plus petit point d'arrêt et flexbox_cell () sur les points d'arrêt suivants. flexbox_cell () se chargera de réinitialiser les marges précédemment définies qui ne sont plus utilisées sur des points d'arrêt plus importants.
Et en passant, tant que vous configurez correctement les propriétés flex de votre conteneur, vous pouvez également utiliser uniquement flexbox_cell () sur les éléments, si vous en avez besoin.
Voici le code:
// apply to the container (for ex. <UL> element)
@mixin flexbox_grid($columns, $Gutter_width){
display: flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: flex-start;
> *{
@include flexbox_cell($columns, $Gutter_width);
}
}
// apply to the cell (for ex. a <LI> element)
@mixin flexbox_cell($columns, $Gutter_width){
$base_width: 100 / $columns;
$gutters: $columns - 1;
$Gutter_offset: $Gutter_width * $gutters / $columns;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto; // IE10 doesn't support calc() here
box-sizing:border-box; // so you can freely apply borders/paddings to items
width: calc( #{$base_width}% - #{$Gutter_offset} );
// remove useless margins (for cascading breakponts)
&:nth-child(#{$columns}n){
margin-right: 0;
}
// apply margin
@for $i from 0 through ($gutters){
@if($i != 0){
&:nth-child(#{$columns}n+#{$i}){
margin-right: $Gutter_width;
}
}
}
}
Usage:
ul{
// just this:
@include flexbox_grid(3,20px);
}
// and maybe in following breakpoints,
// where the container is already setted up,
// just change only the cells:
li{
@include flexbox_cell(4,40px);
}
Évidemment, c'est à vous de définir éventuellement le remplissage/la marge/la largeur du conteneur, ainsi que les marges inférieures de la cellule.
J'espère que ça aide!
En supposant:
- Vous voulez une disposition en grille à 4 colonnes avec habillage
- Le nombre d'articles n'est pas nécessairement un multiple de 4
Définissez une marge gauche pour chaque élément sauf les 1er, 5ème et 9ème éléments, etc. Si la marge de gauche est de 10 pixels, chaque ligne aura une marge de 30 pixels répartie entre 4 éléments. Le pourcentage de largeur pour l'article est calculé comme suit:
100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4
Il s'agit d'une solution de contournement décente pour les problèmes liés à la dernière rangée de flexbox.
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 1em 0 3em;
background-color: peachpuff;
}
.item {
margin-left: 10px;
border: 1px solid;
padding: 10px;
width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
background-color: papayawhip;
}
.item:nth-child(4n + 1) {
margin-left: 0;
}
.item:nth-child(n + 5) {
margin-top: 10px;
}<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>On dirait que personne n’a proposé la solution flex-grow sur le dernier élément ... L’idée est d’avoir votre dernier élément flex pour prendre toute la place qu’il peut en utilisant flex-grow: 1.
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid > *:last-child {
flex-grow: 1;
}
Remarque: cette solution n'est pas parfaite, en particulier si vous avez des éléments centrés à l'intérieur de vos éléments flexibles, ceux-ci étant centrés sur le dernier élément flexif potentiellement énorme.
J'ai fait un mixin SCSS pour cela.
@mixin last-row-flexbox($num-columns, $width-items){
$filled-space: $width-items * $num-columns;
$margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));
$num-cols-1 : $num-columns - 1;
&:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
margin-left: $margin;
}
@for $i from 1 through $num-columns - 2 {
$index: $num-columns - $i;
&:nth-child(#{$num-columns}n+#{$index}):last-child{
margin-right: auto;
}
}
}
Ceci est le lien code: http://codepen.io/diana_aceves/pen/KVGNZg
Il vous suffit de définir la largeur des éléments en pourcentage et en nombre de colonnes.
J'espère que cela pourra vous aider.
Je sais qu’il ya beaucoup de réponses ici, mais .. Le moyen le plus simple de le faire est avec un grid au lieu de flex et grid template columns avec repeat et auto fills, où vous devez définir le nombre de pixels que vous avez donné à chaque élément, 100px de votre code d'extrait.
.exposegrid {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
</div>