web-dev-qa-db-fra.com

Définissez deux éléments flex côte à côte dans une colonne flexbox

J'ai certains éléments que j'affiche dans une direction de colonne dans un display: flex récipient.

Cela place les conteneurs à l'intérieur dans une vue empilée.

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

Sans placer les deux éléments en question dans une autre div que je peux appliquer la ligne de direction flex à ...

Est-il possible de faire asseoir 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>
htmlcsscss3flexbox
6
Jason Is My Name

Je ne pense pas que ce soit possible une fois que vous avez donné à vos parents le flex-direction:column;, vous pouvez également activer flex-wrap:wrap et contrôler la largeur des éléments à l'aide de flex-basis propriété. Cela vous permet d'obtenir l'effet souhaité sans modifier 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>
5
Aaron McGuire

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.

Faites ensuite chaque élément suffisamment long pour occuper une rangée 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 N'a besoin que d'être suffisamment grand pour appliquer un habillage. 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 plus 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>
3
Michael_B