CSS
Layout flessibile della scatola (Flexbox)

introduzione

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

Piè di pagina appiccicoso a altezza variabile

Questo codice crea un piè di pagina appiccicoso. Quando il contenuto non raggiunge la fine della finestra, il piè di pagina rimane nella parte inferiore della finestra. Quando il contenuto si estende oltre la parte inferiore della finestra, anche il piè di pagina viene espulso dal viewport. Visualizza risultato

HTML:

<div class="header">
  <h2>Header</h2>
</div>

<div class="content">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>

<div class="footer">
  <h4>Footer</h4>
</div>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  /* Include `0 auto` for best browser compatibility. */
  flex: 1 0 auto;
}

.header, .footer {
  background-color: grey;
  color: white;
  flex: none;
}

Layout di Holy Grail usando Flexbox

Il layout di Holy Grail è un layout con intestazione e piè di pagina ad altezza fissa e un centro con 3 colonne. Le 3 colonne includono un sidenav a larghezza fissa, un centro fluido e una colonna per altri contenuti come gli annunci (il centro del fluido appare per primo nel markup). CSS Flexbox può essere utilizzato per ottenere questo risultato con un markup molto semplice:

Markup HTML:

<div class="container">
  <header class="header">Header</header>
  <div class="content-body">
    <main class="content">Content</main>
    <nav class="sidenav">Nav</nav>
    <aside class="ads">Ads</aside>
  </div>
  <footer class="footer">Footer</footer>
</div>

CSS:

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0 0 50px;
}

.content-body {
  flex: 1 1 auto;
  
  display: flex;
  flex-direction: row;
}

.content-body .content {
  flex: 1 1 auto;
  overflow: auto;
}

.content-body .sidenav {
  order: -1;
  flex: 0 0 100px;
  overflow: auto;
}

.content-body .ads {
  flex: 0 0 100px;
  overflow: auto;
}

.footer {
  flex: 0 0 50px;
}

dimostrazione

Pulsanti perfettamente allineati all'interno di schede con flexbox

In questi giorni è un modello regolare in design per allineare verticalmente l' invito alle azioni all'interno delle sue carte contenenti come questo:

Questo può essere ottenuto utilizzando un trucco speciale con flexbox

HTML

<div class="cards">
  <div class="card">
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p><button>Action</button></p>
  </div>
  <div class="card">
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p><button>Action</button></p>
  </div>
</div>

Prima di tutto, usiamo i CSS per applicare display: flex; al contenitore. Questo creerà 2 colonne uguali in altezza con il contenuto che scorre naturalmente al suo interno

CSS

.cards {
    display: flex;
}
.card {
    border: 1px solid #ccc;
    margin: 10px 10px;
    padding: 0 20px;
}
button {
    height: 40px;
    background: #fff;
    padding: 0 40px;
    border: 1px solid #000;
}
p:last-child {
    text-align: center;
}

Il layout cambierà e diventerà così:

Per spostare i pulsanti nella parte inferiore del blocco, è necessario applicare la display: flex; alla carta stessa con la direzione impostata sulla column . Dopodiché, dovremmo selezionare l'ultimo elemento all'interno della carta e impostare il margin-top su auto . Questo spingerà l'ultimo paragrafo in fondo alla carta e raggiungerà il risultato richiesto.

CSS finale:

.cards {
    display: flex;
}
.card {
    border: 1px solid #ccc;
    margin: 10px 10px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
}
button {
    height: 40px;
    background: #fff;
    padding: 0 40px;
    border: 1px solid #000;
}
p:last-child {
    text-align: center;
    margin-top: auto;
}

Centratura verticale e orizzontale dinamica (allineare elementi, giustificare-contenuto)

Esempio semplice (centratura di un singolo elemento)

HTML

<div class="aligner">
  <div class="aligner-item">…</div>
</div>

CSS

.aligner {
  display: flex; 
  align-items: center;
  justify-content: center;
}

.aligner-item {
  max-width: 50%; /*for demo. Use actual width instead.*/
}

Ecco una demo .

Ragionamento

Esempi di proprietà individuali

Tutti gli stili seguenti sono applicati a questo layout semplice:

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

dove #container è il flex-box .

Esempio: justify-content: center su un flexbox orizzontale

CSS:

div#container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Risultato:

Ecco una demo .

Esempio: justify-content: center su un flexbox verticale

CSS:

div#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Risultato:

Ecco una demo .

Esempio: align-content: center su una flexbox orizzontale

CSS:

div#container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

Risultato:

Ecco una demo .

Esempio: align-content: center su una flexbox verticale

CSS:

div#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Risultato:

Ecco una demo .

Esempio: combinazione per il centraggio sia sulla flexbox orizzontale

div#container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Risultato:

Ecco una demo .

Esempio: combinazione per il centraggio sia sulla flexbox verticale

div#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Risultato:

Ecco una demo .

Stessa altezza sui contenitori nidificati

Questo codice garantisce che tutti i contenitori annidati abbiano sempre la stessa altezza. Questo viene fatto assicurando che tutti gli elementi annidati abbiano la stessa altezza del div di contenimento del contenitore. Guarda l'esempio di lavoro : https://jsfiddle.net/3wwh7ewp/

Questo effetto si ottiene a causa del fatto che gli align-items proprietà vengono impostati per stretch per impostazione predefinita.

HTML

<div class="container">
  <div style="background-color: red">
    Some <br />
    data <br />
    to make<br />
    a height <br />
 </div>
  <div style="background-color: blue">
    Fewer <br />
    lines <br />
 </div>
</div>

CSS

.container {
    display: flex;
    align-items: stretch; // Default value
}

Nota: non funziona su versioni IE inferiori a 10

Adatta in modo ottimale gli elementi al loro contenitore

Una delle più belle funzionalità di Flexbox è quella di consentire l'adattamento ottimale dei contenitori all'elemento principale.

Demo dal vivo

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

CSS:

.flex-container {
    background-color: #000;
    height: 100%;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
}

.flex-item {
    background-color: #ccf;
    margin: 0.1em;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 200px; /* or % could be used to ensure a specific layout */
}

Risultato:

Le colonne si adattano quando lo schermo viene ridimensionato.