Apprendre les mises en page CSS

flexbox

Le nouveau mode de mise en page flexbox se veut redéfinir comment nous faisons les mise en page en CSS. Malheureusement la spécification a beaucoup changé récemment, donc c'est implémenté différement sur les différents navigateurs. Cependant, j'aimerais partager quelques exemples pour que vous sachiez ce qui arrive. Ces exemples ne marchent pour l'instant qu'avec l'implementation flexbox de Chrome, basé sur la dernière version du standard.

Il y a beaucoup de ressources dépassées sur flexbox. Si vous voulez en apprendre plus sur flexbox, commencez ici par apprendre comment identifier si une ressource est actuelle ou pas. J'ai écrit un article détaillé utilisant la dernière syntaxe.

Flexbox vous permet de faire beaucoup plus; les exemples qui suivent ne sont là que pour vous donner une idée :

Simple mise en page avec flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

Flexbox c'est trop facile!

</section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>

</div>

Mise en page plus fantaisiste avec flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

J'ai une largeur de 200px quand il y a la place et je serai réduite à 100px s'il n'y en a pas, mais pas moins.

</div>

J'aurai toujours une largeur de 200px, peu importe ce qu'il se passe.

</div>

Je prendrai 1/3 de la place restante.

</div>

Je prendrai 2/3 de la place restante.

</div>

Alignement avec flexbox

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

<div>

Pour finir, c'est facile d'aligner quelque chose verticalement en CSS !

</div>