CSSLayout flessibile della scatola (Flexbox)


introduzione

Il modulo Flexible Box, o semplicemente "flexbox" in breve, è un modello box progettato per interfacce utente e consente agli utenti di allineare e distribuire lo spazio tra gli elementi in un contenitore in modo tale che gli elementi si comportino in modo prevedibile quando il layout della pagina deve adattarsi a diversi, sconosciuti dimensioni dello schermo Un contenitore flessibile espande gli oggetti per riempire lo spazio disponibile e li riduce per evitare il trabocco.

Sintassi

  • display: flex;
  • direzione della flessione: riga | fila-indietro | colonna | colonna-retromarcia;
  • flex-wrap: nowrap | avvolgere | wrap-retromarcia;
  • flex-flow: <'flex-direction'> || < 'Flex-wrap'>
  • justify-content: flex-start | flex-end | centro | spazio-tra | spazio intorno;
  • align-items: flex-start | flex-end | centro | linea di base | allungare;
  • allinea-contenuto: flex-start | flex-end | centro | spazio-tra | spazio-in giro | allungare;
  • ordine: <intero>;
  • flex-grow: <numero>; / * default 0 * /
  • flex-shrink: <numero>; / * predefinito 1 * /
  • flex-base: <lunghezza> | auto; / * predefinito auto * /
  • flex: nessuno | [<'flex-grow'> <'flex-shrink'>? || <'flex-base'>]
  • align-self: auto | flex-start | flex-end | centro | linea di base | allungare;

Osservazioni

Prefissi di Vender

  • mostra: -webkit-box; / * Chrome <20 * /
  • display: -webkit-flex; / * Chrome 20+ * /
  • display: -moz-box; / * Firefox * /
  • display: -ms-flexbox; / * IE * /
  • display: flex; / * Browser moderni * /

risorse

Layout flessibile della scatola (Flexbox) Esempi correlati