CSS: Comment faire l'inverse de wrapper ligne

Question

Après une recherche, je ne trouve pas comment faire l'inverse de cela, Je vais donner une hauteur, et la deuxième div est sous la première et la troisième div est à droite.

https://jsfiddle.net/qq3n52vg/

.wrapper { 
 
    border: 1px solid black; 
 
    width: 30px; 
 
} 
 

 
.left { 
 
    border: 1px solid red; 
 
    display: inline; 
 
}

<div class="wrapper"> 
 
    <div class="left">1</div> 
 
    <div class="left">2</div> 
 
    <div class="left">3</div> 
 
</div>

Merci

Answer 1

Vous pouvez utiliser un flexbox que enveloppements dans la colonne flex-direction - voir la démo ci-dessous:

.wrapper { 
 
    border: 1px solid black; 
 
    height: 40px; 
 
    display: flex; /* Define a flexbox*/ 
 
    flex-wrap: wrap; /* Allow wrapping*/ 
 
    flex-direction: column; /*Column direction*/ 
 
    align-items: flex-start; /* Override default stretching*/ 
 
    align-content: flex-start; /* aligning wrapping lines */ 
 
} 
 

 
.left { 
 
    border: 1px solid red; 
 
    display: inline; 
 
}

<div class="wrapper"> 
 
    <div class="left">1</div> 
 
    <div class="left">2</div> 
 
    <div class="left">3</div> 
 
</div>

Answer 2

Plus de kukkuz réponse. Pour plus de lecture sur Flexbox

-flex direction

Ceci établit l'axe principal, définissant ainsi la direction des éléments de flexion sont placés dans le récipient flexible. Flexbox est (en dehors de l'emballage optionnel) un concept de disposition à sens unique. Pensez aux articles flexibles comme présentant principalement des lignes horizontales ou verticales.

.container { 
    flex-direction: row | row-reverse | column | column-reverse; 
} 

• row (par défaut): de gauche à droite dans ltr; droite à gauche dans rtl
• row-reverse: de droite à gauche dans ltr; de gauche à droite dans rtl
• column: idem row mais haut en bas
• column-reverse: idem row-reverse mais bas en haut