Differenze tra le versioni di "Aiuto:Manuale di stile/Avanzato"

 
Il primo elemento occupa sempre una larghezza del 100%, in modo da far andare a capo ciò che viene dopo anche se il contenitore è un <code>flex</code>. Le coppie successive su schermi grandi occupano rispettivamente 20% e 80% di larghezza, che risulta in un 20% + 80% = 100% per coppia (il che manda a capo l'elemento successivo come sopra), mentre su schermi piccoli il secondo elemento va a 100% e quindi deve andare a capo perché non ci sta nello spazio rimanente (20% + 100% > 100%).
 
Esistono anche alcune "scorciatoie":
* <code>flex-row-stretch-around</code> è equivalente a <code>flex flex-row flex-items-stretch flex-main-space-around</code>.
* <code>flex-row-center-around</code> è equivalente a <code>flex flex-row flex-items-center flex-main-space-around</code>.
* <code>flex-row-center-stretch</code> è equivalente a <code>flex flex-row flex-nowrap flex-items-center flex-main-stretch</code>.
 
Per una guida completa a tutti gli strumenti relativi ai flex, si rimanda a [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ questa pagina].
46 258

contributi