[Flexbox] Ligne + Colonne

a marqué ce sujet comme résolu.

Bonjour,

Petit problème avec Flexbox : Imaginons que j’ai trois éléments, appelons les A, B et C.

Mon code HTML :

1
2
3
4
5
<flex>
  <A>AAA</A>
  <B>BBB</B>
  <C>CCC</C>
</flex>

Donc là j’ai soit :

  • A + B + C en ligne (par défaut)
  • A + B + C en colonne

par exemple : https://jsfiddle.net/1f0woou1/

Or ce que je voudrais c’est A + (B & C) en ligne, mais avec C en dessous de B.

Et ce sans modifier le code HTML.

Uniquement en CSS.

En gros j’aimerais ça : https://jsfiddle.net/xfppmvx4/

Mais avec le code HTML du premier exemple.

Est-ce possible ?

Merci.

+0 -0

hi,

Comme tu n’as pas indiqué de contrainte particulière je te propose ceci :

1
2
3
4
5
<section>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</section>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
section {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height:200px;
}

div {
    flex:1 1 auto;
}

div:first-child {
    height:100%;
}

.a,.b,.c {background:pink;padding:25px 50px;margin:3px;border:1px solid red;}

L’idée c’est de mettre les éléments en colonne et d’activer le wrap pour qu’ils se décalent vers la droite lorsqu’il n’y a plus de place en hauteur.

En indiquant au premier élément de prendre toute la place, il force les deux autres div à se décaler.

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte