J'ai quelques éléments que j'affiche dans une direction de colonne dans un conteneur display: flex.

Cela place les conteneurs dans une vue empilée.

Disons que j'ai 5 éléments empilés dont j'ai besoin pour que deux d'entre eux affichent une ligne de direction en ligne ou flexible.

Sans placer les deux éléments en question dans un autre div auquel je peux appliquer une ligne de direction flexible ...

Est-il possible de mettre ces éléments côte à côte?

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

.flex-column .column-item:nth-of-type(4),
.flex-column .column-item:nth-of-type(5) {
  width: calc(50% - 10px);
  display: inline-block;
  float: left;
}

.flex-column .column-item:nth-of-type(4) {
  margin-right: 20px;
}
<div class="flex-column">
  <div class="column-item">a</div>
  <div class="column-item">b</div>
  <div class="column-item">c</div>
  <div class="column-item">d</div>
  <div class="column-item">e</div>
</div>
8
Jason Is My Name 20 nov. 2018 à 15:26

3 réponses

Meilleure réponse

Je ne pense pas que ce soit possible une fois que vous avez donné à votre parent la propriété flex-direction:column;, vous pouvez également activer flex-wrap:wrap et contrôler la largeur des éléments en utilisant la propriété flex-basis. Cela vous permet d'obtenir l'effet souhaité sans altérer votre structure html.

.flex-column {
    display: flex;
    flex-wrap:wrap;
}

.flex-column .column-item {
 flex-basis:100%;}
.flex-column .column-item:nth-of-type(4),
.flex-column .column-item:nth-of-type(5) {
    flex-basis:50%;
   
    
}
<div class="flex-column">
    <div class="column-item">a</div>
    <div class="column-item">b</div>
    <div class="column-item">c</div>
    <div class="column-item">d</div>
    <div class="column-item">e</div>
</div>
8
Aaron McGuire 20 nov. 2018 à 12:34

La mise en page est assez simple avec flexbox. Vous n'avez pas besoin de flex-direction: column.

Utilisez simplement flex-direction: row avec flex-wrap: wrap.

Ensuite, faites en sorte que chaque élément soit suffisamment long pour occuper une ligne complète.

Réduisez le flex-basis sur les éléments qui doivent partager une ligne.

.flex-column {
  display: flex;
  flex-wrap: wrap;
}

.column-item {
  flex: 1 0 61%;  /* flex-grow, flex-shrink, flex-basis */
  margin: 2px;
  background-color: lightgreen;
}

.column-item:nth-of-type(4),
.column-item:nth-of-type(5) {
  flex-basis: 40%;
}
<div class="flex-column">
  <div class="column-item">a</div>
  <div class="column-item">b</div>
  <div class="column-item">c</div>
  <div class="column-item">d</div>
  <div class="column-item">e</div>
</div>

Avec flex-grow: 1 défini dans le raccourci flex, il n'est pas nécessaire d'utiliser calc().

Étant donné que flex-grow consommera de l'espace libre sur la ligne, flex-basis doit seulement être suffisamment grand pour appliquer un wrap. Dans ce cas, avec flex-basis: 61%, il y a beaucoup d'espace pour les marges, mais jamais assez d'espace pour un deuxième élément.


Il existe une solution encore plus simple et efficace utilisant CSS Grid:

.flex-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

.column-item:nth-of-type(-n + 3) {
  grid-column: span 2;
}

.column-item {
  background-color: lightgreen;
}
<div class="flex-column">
  <div class="column-item">a</div>
  <div class="column-item">b</div>
  <div class="column-item">c</div>
  <div class="column-item">d</div>
  <div class="column-item">e</div>
</div>
4
Michael Benjamin 20 nov. 2018 à 16:54

Essayez d'utiliser flex-wrap: wrap, la propriété active plusieurs lignes dans flexbox

-1
Gabriel Furlan 20 nov. 2018 à 13:15