English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS3 flexible Box o flexbox è un nuovo modello di layout per creare progetti utente più flessibili.
Flessibile box, noto anche come flexbox, è un nuovo modello di layout introdotto in CSS3 per creare progetti utente flessibili con più righe e colonne, senza utilizzare percentuali o valori di lunghezza fissi. CSS3 Il modello di layout flex fornisce un meccanismo semplice e potente che gestisce automaticamente la distribuzione dello spazio e l'allineamento del contenuto tramite fogli di stile, senza interferire con il markup reale.
Esempio di come utilizzare il modello di layout flex per creare una layout a tre colonne, in cui la larghezza e l'altezza di ciascuna colonna sono uguali.
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Three Equal Flex Column</title>
.flex-container {
width: 80%;
min-height: 300px;
display: -webkit-flex; /* Safari */
display: flex;
<style>
}
.flex-container div {
background: #dbdfe5;
-webkit-flex: 1; /* Safari */
border: 1px solid #808080;
flex: 1;
}
-ms-flex: 1; /* IE 10 */
</style>Prova a vedere‹/›</head>Item 1Item 2Item 3</html>Se presti attenzione al codice di esempio sopra, noterai che non abbiamo messo all'interno della .flex-container<div>
Il Flexbox è composto da contenitori Flex e elementi flessibili. Puoi specificare qualsiasi larghezza sopra, ma puoi vedere che la larghezza di ogni colonna è esattamente un terzo dell'elemento padre .flex-container.displayL'attributo display è impostato su flex (generablock-level Flex container) o inline-flex (genera un contenitore Flex simile ainline-blockblock-level (i suoi elementi figli diventano automaticamente elementi flessibili e vengono disposti utilizzando il modello di layout flessibile).Per creare un contenitore Flex, puoi usare l'attributo display come inline-block (crea un contenitore Flex inline) o inline-flex (genera un contenitore Flex simile a,floateclearLe proprietà non hanno alcun effetto sugli elementi flessibili. vertical-align
L'elemento di estensione沿着该flex-directionLa linea di estensione specificata dall'attributo si trova all'interno del contenitore di estensione. Di default, ogni contenitore flessibile ha una sola linea di estensione, la cui direzione è la stessa dell'asse inline della modalità di scrittura corrente oLa direzione di scrittura è la stessa. La seguente immagine ti aiuterà a comprendere i termini della layout Flex.
Nello standard del modello di contenitore CSS, gli elementi di solito vengono visualizzati nell'ordine in cui appaiono nei tag HTML di base. La布局 Flex ti permette di controllare la direzione del flusso all'interno di un contenitore Flex, in modo che gli elementi possano essere disposti in qualsiasi direzione di flusso, sia a sinistra, a destra, in basso o anche verso l'alto.
Puoi usareflex-directionL'attributo specifica il flusso degli elementi flessibili nel contenitore flessibile. Il valore predefinito row è lo stesso della modalità di scrittura corrente o della direzione del testo del documento, ad esempio, dall'inglese da sinistra a destra.
.flex-container {
width: 80%;
min-height: 300px;
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
border: 1px solid #666;
}Prova a vedere‹/›Analogamente, puoi visualizzare gli elementi flessibili in colonna all'interno di un contenitore flessibile, invece di utilizzare il valore di riga della proprietà flex-direction, come mostrato di seguito:
.flex-container {
width: 80%;
min-height: 300px;
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}Prova a vedere‹/›L'aspetto più importante della disposizione elastica è la capacità dei componenti elastici di modificare la loro larghezza o altezza per riempire lo spazio disponibile. Questo è fatto attraversoflexrealizzato dall'attributo.flex-grow,flex-shrinkeflex-basisAttributo.
Il contenitore elastico distribuisce lo spazio disponibile proporzionalmente ai suoi因子 di crescita elastici, o lo riduce per prevenire il sovraccarico proporzionalmente al suo coefficiente di contrazione elastica.
.flex-container {
width: 80%;
min-height: 300px;
display: -webkit-flex; /* Safari */
display: flex;
}
.flex-container div {
padding: 10px;
background: #dbdfe5;
}
.item1, .item3 {
-webkit-flex: 1; /* Safari */
flex: 1;
}
.item2 {
-webkit-flex: 2; /* Safari */
flex: 2;
}Prova a vedere‹/›Nell'esempio sopra, i primi e terzi componenti Flex occuperanno 1/4, ossia 1/(1+1+2) dello spazio libero, mentre il secondo componente Flex occuperà 1/2, ossia 2/(1+1+2) dello spazio libero. Allo stesso modo, è possibile utilizzare questa semplice tecnica per creare altri layout flessibili.
Attenzione:Si consiglia vivamente di utilizzare l'attributo abbreviato piuttosto che l'attributo flex singolo, poiché può reimpostare correttamente i componenti non specificati.
Ci sono quattro attributijustify-content,align-content,align-itemsealign-selfIl loro scopo è specificare l'allineamento dei componenti elastici all'interno del contenitore elastico. I primi tre si applicano ai contenitori flex, mentre l'ultimo si applica a un singolo componente flex.
Utilizzando l'attributo justify-content, è possibile allineare i componenti Flex lungo l'asse principale del contenitore elastico (cioè nella direzione orizzontale). Di solito viene utilizzato quando i componenti elastici non utilizzano tutto lo spazio disponibile sull'asse principale.
L'attributo justify-content accetta i seguenti valori:
flex-start-Valore predefinito. I componenti elastici vengono posizionati all'inizio dell'asse principale.
flex-end -I componenti Flex si trovano all'estremità dell'asse principale.
center -I componenti Flex sono posizionati al centro dell'asse principale con un uguale spazio libero ai lati. Se il spazio libero rimanente è negativo, ossia i componenti si spingono oltre, i componenti elastici si spingeranno uniformemente in entrambe le direzioni.
space-between -I componenti Flex sono distribuiti uniformemente lungo l'asse principale, con il primo elemento posizionato lungo il punto di inizio principale e l'ultimo lungo l' estremità principale. Se i componenti si spingono oltre o ci sono solo uno, questo valore è uguale a flex-start.
space-around -I componenti Flex sono distribuiti uniformemente su entrambi i lati con metà della dimensione dello spazio. Se si spingono oltre o ci sono solo uno, questo valore è uguale a center.
Esempio seguente ti mostrerà l'impatto di diversi valori di proprietà justify-content sugli elementi flex di larghezza fissa multi-colonna.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-justify-content: space-around;
display: flex;
justify-content: space-around;
}
.item1 {
width: 75px;
background: #e84d51;
}
.item2 {
width: 125px;
background: #7ed636;
}
.item3 {
width: 175px;
background: #2f97ff;
}Prova a vedere‹/›Puoi allineare gli elementi Flex lungo l'asse orizzontale del contenitore Flex (cioè la direzione verticale) utilizzando l'attributo align-items o align-self. Tuttavia, quando si applica align-items al contenitore Flex, l'attributo align-self viene applicato a un singolo elemento flex e sovrascrive align-items. Entrambi gli attributi accettano i seguenti valori:
flex-start — Gli elementi Flex si trovano all'inizio dell'asse di intersezione.
flex-end — Gli elementi Flex si trovano all'estremità dell'asse di intersezione.
center — Gli elementi flex vengono posizionati al centro dell'asse orizzontale, con lo spazio disponibile uguale a entrambi i lati. Se lo spazio libero rimanente è negativo, ossia l'elemento overflowa, l'elemento flex overflowerà in entrambe le direzioni.
baseline — La base di testo di ogni elemento flex (o asse inline) è allineata con la base più alta dell'elemento flex.font-size.
Stretch — Gli elementi flex si allungano per riempire la riga o la colonna corrente, a meno che non siano bloccati da min-width o max-width o min-height. Valore predefinito dell'attributo align-items.
Esempio seguente ti mostrerà l'impatto di diversi valori di proprietà align-items sugli elementi flex di altezza fissa multi-colonna.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
}
.item1 {
width: 75px;
height: 100px;
background: #e84d51;
}
.item2 {
width: 125px;
height: 200px;
background: #7ed636;
}
.item3 {
width: 175px;
height: 150px;
background: #2f97ff;
}Prova a vedere‹/›Puoi anche distribuire lo spazio disponibile sull'asse orizzontale degli elementi flex multi-linea o multi-colonna. L'attributo align-content viene utilizzato per allineare le righe degli elementi flex, ad esempio, se c'è spazio in eccesso sull'asse orizzontale, allineerà le righe degli elementi flex multi-linea con justify-content, come se allineassi un singolo elemento con l'asse principale.
L'attributo align-content accetta gli stessi valori di justify-content, ma li applica sull'asse orizzontale invece dell'asse principale. Accetta anche un altro valore:
StretchLo spazio disponibile viene distribuito uniformemente tra tutte le righe o le colonne per aumentare la loro dimensione incrociata. Se lo spazio libero rimanente è negativo, questo valore è uguale a flex-start.
Esempio seguente ti mostrerà l'impatto di diversi valori di proprietà align-content sugli elementi flex di altezza fissa multi-linea.
.flex-container {
width: 500px;
min-height: 300px;
margin: 0 auto;
font-size: 32px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: space-around;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
.flex-container div {
width: 150px;
height: 100px;
background: #dbdfe5;
}Prova a vedere‹/›Oltre a modificare il flusso all'interno del contenitore flex, puoi anche modificareordineL'attributo di display indica l'ordine di un singolo elemento flex. Questo attributo accetta interi positivi o negativi come valori. Per impostazione predefinita, tutti i progetti flex vengono visualizzati e布局dell'ordine in cui appaiono nel tag HTML, poiché l'ordine predefinito è 0.
Questo esempio ti mostrerà come specificare l'ordine di un singolo progetto elastico.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
.flex-container div {
padding: 10px;
width: 130px;
}
.item1 {
background: #e84d51;
-webkit-order: 2; /* Safari 6.1+ */
order: 2;
}
.item2 {
background: #7ed636;
-webkit-order: 1; /* Safari 6.1+ */
order: 1;
}
.item3 {
background: #2f97ff;
-webkit-order: -1; /* Safari 6.1+ */
order: -1;
}Prova a vedere‹/›Attenzione:Il progetto con il valore di ordine più basso viene messo davanti, mentre il progetto con il valore di ordine più alto viene messo all'ultimo. I progetti con lo stesso valore di order vengono visualizzati nell'ordine in cui appaiono nel documento sorgente.
Di solito, l'allineamento verticale dei contenuti richiede l'uso di JavaScript o alcune tecniche CSS rudimentali. Ma, con flexbox, è possibile eseguire questa operazione senza alcuna regolazione.
Questo esempio ti mostrerà come utilizzare la funzione di flexbox CSS3 per allineare verticalmente e orizzontalmente i contenuti in modo semplice nel centro.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
.item {
width: 300px;
padding: 25px;
margin: auto;
background: #f0e68c;
}Prova a vedere‹/›Per impostazione predefinita, il contenitore elastico mostra solo righe o colonne singole di progetti elastici. Maflex-wrapSe non c'è abbastanza spazio su una riga di scorrimento, puoi utilizzare attributi del contenitore flex per specificare se il suo elemento伸缩 deve essere scambiato in più righe.
L'attributo flex-wrap accetta i seguenti valori:
nowrap-Valore predefinito. Gli elementi伸缩 vengono messi in una riga. Se non c'è abbastanza spazio sulla linea di scorrimento, potrebbe verificarsi un overflow.
wrap — Il contenitore flex divide i suoi elementi flex in più righe, simile a come un testo troppo largo per essere contenuto in una riga corrente viene diviso in una nuova riga.
wrap-reverse — Gli elementi伸缩 avranno bisogno di una riga di scorrimento, ma in ordine inverso, ossia,Punto di partenza crociato (cross-start)ePunto di fine crociato(cross-end)Le direzioni si scambieranno.
Gli esempi seguenti ti mostreranno come utilizzare l'attributo flex-wrap per visualizzare gli elementi flex in una o più righe nel contenitore flex.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
.flex-container div{
width: 130px;
padding: 10px;
background: #dbdfe5;
}Prova a vedere‹/›Attenzione:Puoi anche utilizzare proprietà CSS abbreviate in una singola dichiarazioneflex-flowImpostare flex-direction e flex-wrap. Accetta valori come per ogni attributo e può essere in qualsiasi ordine.