J'ai donc une sorte d'en-tête, qui contient un titre et un tas de boutons. Ces boutons peuvent être ajoutés, il est donc important pour moi qu'ils s'enroulent correctement.

Le hic, c'est que ces boutons sont alimentés via angulaire en tant que composant extérieur, et en tant que tels, ils sont placés dans un div (je suppose?)

Dans ce codepen, j'ai illustré le résultat que je veux atteindre (bleu) par rapport à ce que j'obtiens (rouge). C'est difficile à voir sur l'extrait, voici donc un lien vers un codepen. Pour être clair, je veux que les boutons s'enroulent individuellement, un par un, plutôt qu'en groupe.

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

.red {
  background: red;
}

.blue {
  background: blue;
}
<div class="flex-row red">
  <h1>Really long annoying header goes here</h1>
  <div>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
  </div>
</div>

<div class="flex-row blue">
  <h1>Really long annoying header goes here</h1>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
</div>

Au fait, voici le composant selection-buttons.component.html:

<button class="selectionbtn selectbtn" *ngFor="let btn of input.items;let idx = index" (click)="onSelect(idx)" [ngClass]="{'first': idx === 0, 'last': idx === input?.items?.length -1, 'active': currIndex === idx }" value="idx">{{btn.label | translate}}</button>

Je me suis assuré de supprimer le div dans lequel ils étaient générés, ce qui m'a fait penser que lorsqu'ils seraient appelés, ils seraient simplement générés à l'intérieur de la div actuelle, mais cela ne semble pas être le cas.

2
mlamp 24 nov. 2017 à 12:21

3 réponses

Meilleure réponse

Avec des éléments de type bloc, comme le sont les éléments flexibles, les navigateurs commenceront à envelopper les éléments extérieurs en premier et les éléments intérieurs en dernier.

Sachant cela, l'une des solutions possibles consiste à rendre tous les éléments enfants en ligne, ce qui signifie également que display: flex doit être supprimé du parent le plus extérieur.

Codepen mis à jour

Extrait de pile

.flex-row {
  /*display: flex;
  flex-flow: row wrap;*/
}

.flex-row * {
  display: inline;
}

.red {
  background: red;
}

.blue {
  background: blue;
}
<div class="flex-row red">
  <h1>Really long annoying header goes here</h1>
  <div>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
  </div>
</div>

<div class="flex-row blue">
  <h1>Really long annoying header goes here</h1>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
</div>
3
Ason 24 nov. 2017 à 10:50

Donnez display:flex à la classe button wrap div comme:

.red div{
  display:flex;
}

Remarque : veuillez vérifier en pleine page.

.flex-row {
  display: flex;
  flex-flow: row wrap;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
.red div{
  display:flex;
}
<div class="flex-row red">
  <h1>Really long annoying header goes here</h1>
  <div>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
  </div>
</div>

<div class="flex-row blue">
  <h1>Really long annoying header goes here</h1>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
</div>
0
ankita patel 24 nov. 2017 à 09:27

Ceci est possible avec flexbox, mais uniquement en utilisant une propriété mal prise en charge sur le div interne.

display: contents;

Ces éléments ne produisent pas par eux-mêmes une boîte spécifique. Ils sont remplacés par leur pseudo-boîte et leurs boîtes enfants.

MDN

Le support est essentiellement Chrome (58+) et FF (37+)

Remarque: jusqu'à Chrome 63 ( "Dans Chrome, la valeur du contenu est actuellement désactivée par défaut, mais peut être activée avec l'indicateur" Fonctionnalités de la plate-forme Web expérimentale "." )

.flex-row {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.red {
  background: red;
}

.red div {
  display: contents;
}
<div class="flex-row red">
  <h1>Really long header goes here</h1>
  <div>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
  </div>
</div>
1
Community 20 juin 2020 à 09:12
47469997