1
votes

Forcer Flexbox à envelopper après un élément spécifique (direction: colonne)

J'ai une navigation. Les entrées individuelles sont affichées les unes en dessous des autres avec Flexbox (sens: colonne). Si une entrée de navigation obtient la classe "seperator", la navigation doit entrer dans la ligne suivante.

Est-il possible de forcer Flexbox à exécuter un "wrap"?

le problème

.nav {
    display: flex;
    flex-direction: column;
}

.nav .child.seperator {
    force: wrap :P
}

Je veux avoir le contrôle sur l'enveloppe par une classe spécifique de une entrée de navigation. Exemple d'application: les deux premières entrées sont en dessous l'une de l'autre, la troisième, la quatrième et la cinquième également, mais dans une nouvelle colonne. Les sixième et septième sont également en dessous l'un de l'autre, mais dans une troisième colonne.

css flexbox

5 commentaires

Il peut y avoir plus d'un séparateur

Non je ne crois pas. La seule chose qui peut forcer un enroulement dans une colonne flexible est une hauteur définie par rapport à la colonne.

Malheureusement, j'ai craint cette réponse et la considère comme une faiblesse de Flexbox. Les développeurs n'y ont pas pensé, à mon avis. Pour le mode flex-direction: row, il existe des solutions de contournement et des possibilités.

@dotling J'ai mis à jour le code avec la méthode row et column . bien vouloir vérifier.

Je veux que les entrées de navigation soient affichées les unes sous les autres et les diviser en une nouvelle ligne en commençant par une entrée spécifique. Je pense que la direction: la ligne ne convient pas pour cela?

3 Réponses :

0
votes

Vous pouvez y parvenir en utilisant la grille CSS mais il serait difficile de la rendre dynamique au cas où vous auriez de nombreux séparateurs.

<div class="wrapper">
  <span>some text</span>
  <span>some text</span>
  <span>some text</span>
  <span>some text</span>
  <span class="seperator">next</span>
  <span>some text</span>
  <span>some text</span>
  <span class="seperator">next</span>
  <span>some text</span>
  <span>some text</span>
  <span>some text</span>
</div>

.wrapper {
  display:grid;
  grid-template-rows:repeat(20,auto); /*big enough*/
  grid-auto-columns:1fr;
  grid-auto-flow:column; /*column direction*/
  grid-gap:5px;
}

.wrapper > span {
  background:#000;
  padding:5px;
  color:#fff;
}
/*first one*/
.seperator,
.seperator ~ span{
 grid-column:2;
}
/*second one*/
.seperator ~ .seperator,
.seperator ~ .seperator ~ span{
 grid-column:3;
}
/*and so one*/

4 commentaires

Merci de vous référer à display: grid! Cela fonctionnerait très bien. Malheureusement, je suis obligé de supporter le mal IE 11, donc display: grid est omis :(

La méthode display: grid ne convient pas non plus.

@Saravana c'est en fait la seule solution qui fonctionne;)

C'est en fait la seule solution qui fonctionne, je suis d'accord. Je l'ai utilisé et j'ai écrit une solution de contournement pour IE avec max-height. Merci beaucoup @TemaniAfif

-4
votes

Vous pouvez y parvenir en utilisant la propriété CSS flex-wrap .

Consultez la documentation MDN pour cela ici: https: / /developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

0 commentaires

-2
votes

Je viens d'utiliser la méthode flexbox pour la navigation. height utilisé comme séparateur pour déplacer la ligne dans la colonne suivante.

<div class="flex">
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
</div>

*{
  box-sizing:border-box;
  position:relative; 
}

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.item {
    margin: 5px;
    background: #000;
    padding: 10px 0;
    color: #fff;
    width: 30%;
    text-align:center;
}

Solution 2: Utilisation des données flex-direction:row: final

<div class="flex">
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
</div>

.flex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
}

.item {
    width: 150px;
    margin: 5px;
    background: #000;
    padding: 10px 0;
    color: #fff;
    text-align: center;
}

3 commentaires

est une direction de ligne pas une direction de colonne

Merci d'avoir répondu. Le problème avec cette approche est que les entrées de navigation se détachent d'une certaine hauteur et non, comme prévu, d'une certaine entrée avec la classe "seperator".

Merci d'essayer d'aider. Les deux solutions ont le problème que le contrôle de l'habillage n'est pas obtenu par une classe spécifique d'une entrée de navigation. Exemple d'application: les deux premières entrées sont en dessous l'une de l'autre, la troisième, la quatrième et la cinquième également, mais dans une nouvelle colonne. Les sixième et septième sont également en dessous l'un de l'autre, mais dans une troisième colonne