Esempio
Lines Pack verso il centro del contenitore flessibile:
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
Prova tu stesso " Definizione e utilizzo
La proprietà align-contenuti modifica il comportamento della proprietà flex-wrap. E 'simile per allineare-voci, ma invece di allineare elementi di flessione, si allinea le linee di flessione.
Suggerimento: Utilizzare il giustificare-contenuti di proprietà per allineare i punti all'ordine del principale asse (horizontally) .
Nota: Ci deve essere più linee di prodotti di questo immobile avere alcun effetto.
| Valore di default: | stretch |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.alignContent="center" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| align-content | 21,0 | 11.0 | 28.0 | 9.0 7.0 -webkit- | 12.1 |
CSS Sintassi
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| stretch | Valore di default. Le linee si estendono a prendere lo spazio rimanente | Gioca " |
| center | Le linee sono imballati verso il centro del contenitore flex | Gioca " |
| flex-start | Le linee sono imballati verso l'inizio del contenitore flex | Gioca " |
| flex-end | Le linee sono confezionati verso la fine del contenitore flex | Gioca " |
| space-between | Le linee sono uniformemente distribuite nel contenitore flessibile | Gioca " |
| space-around | Le linee sono uniformemente distribuite nel contenitore flessibile, con spazi half-size su entrambi i lati | Gioca " |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | Gioca " |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Pagine correlate
CSS Riferimento: align-items property
CSS Riferimento: align-self property
CSS Riferimento: justify-content property
Di riferimento HTML DOM: alignContent property