Imparare l'impaginazione con i CSS

flexbox

La nuova modalità di impaginazione, flexbox, è sulla buona strada per riuscire a ridefinire come impaginiamo con i CSS. Sfortunatamente la specifica ha subito molti cambiamenti di recente, quindi è stata implementata in maniera differente dai diversi browser. Comunque, vorrei condividere un paio di esempi in modo da sapere con cosa avremo a che fare. Questi esempi attualmente funzionano solo con alcuni browser che fanno uso delle ultime specifiche.

Ci sono molte fonti non aggiornate riguardanti flexbox. Se desideri saperne di più su flexbox, inizia qui per imparare a distinguere le fonti aggiornate da quelle che invece non lo sono più. Inoltre ho scritto un articolo dettagliato che utilizza l'ultima sintassi.

Con flexbox puoi fare molto di più; questi sono solo alcuni esempi per darti un'idea:

Impaginazione semplice utilizzando Flexbox

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

Flexbox è proprio 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>

Impaginazione fantasiosa con 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;
}

Io rimarrò 200px quando c'è spazio, e mi rimpicciolirò fino a 100px se non ce n'è, ma non andrò oltre.

</div>

Io rimarrò sempre 200px, non importa cosa succede.

</div>

Io riempirò 1/3 della larghezza rimanente

</div>

Io riempirò 2/3 della larghezza rimanente

</div>

Centratura con 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>

Finalmente, è facile centrare verticalmente qualcosa con i CSS!

</div>