Flexbox1

by Michel Piallier

HTML

<h1>Flexbox</h1>
<div class="container"> 
		<article class="one">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</article>
		<article class="two">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.</article>
		<article class="three">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.</article>
</div>
<div class="space">

</div>

<div class="container2"> 
		<article class="one">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</article>
		<article class="two">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.</article>
		<article class="three">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.</article>
</div>

CSS

.container {
	display: flex;
    gap: 10px;
}

.container > * {
    flex-basis: 50px;
}

article {
    background-color: yellow;
}


.container2 {
    display: inline-flex;
	flex-direction: column;
   	gap: 10px;
}
  .container2 > * {
    flex-basis: 50px;
}

 .space {
     height: 60px;
}