Ricerca…


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

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:

Quello che stiamo cercando di ottenere

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ì:

Quello che stiamo cercando di ottenere

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

Proprietà Valore Descrizione
align-items center Questo centra gli elementi lungo l'asse diverso da quello specificato dalla flex-direction , cioè il centraggio verticale per un flexbox orizzontale e il centraggio orizzontale per un flexbox verticale.
justify-content center Questo centra gli elementi lungo l'asse specificato dalla flex-direction . Vale a dire, per un flexbox orizzontale ( flex-direction: row ), questo si concentra orizzontalmente, e per un flexbox verticale ( flex-direction: column ), questo centra verticalmente)

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:

centraggio orizzontale

Ecco una demo .

Esempio: justify-content: center su un flexbox verticale

CSS:

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

Risultato:

centraggio verticale

Ecco una demo .

Esempio: align-content: center su una flexbox orizzontale

CSS:

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

Risultato:

centratura orizzontale con allinea-centro

Ecco una demo .

Esempio: align-content: center su una flexbox verticale

CSS:

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

Risultato:

centraggio verticale con allinea-centro

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:

centrando orizzontalmente entrambe le combinazioni

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:

centrando orizzontalmente entrambe le combinazioni

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.

inserisci la descrizione dell'immagine qui



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow