Qual è la differenza tra align-content e align-items?
Risposte:
La align-itemsproprietà della scatola flessibile allinea gli oggetti all'interno di un contenitore flessibile lungo l'asse trasversale proprio come justify-contentfa lungo l'asse principale. (Per impostazione predefinita, flex-direction: rowl'asse trasversale corrisponde a verticale e l'asse principale corrisponde a orizzontale. Con flex-direction: columnquesti due vengono scambiati rispettivamente).
Ecco un esempio di come align-items:centerappare:
Ma align-contentè per scatole flessibili multi linea. Non ha alcun effetto quando gli articoli si trovano su un'unica riga. Allinea l'intera struttura in base al suo valore. Ecco un esempio per align-content: space-around;:
Ed ecco come align-content: space-around;con gli align-items:centersguardi:
Notare che la terza casella e tutte le altre caselle nella prima riga diventano centrate verticalmente in quella riga.
Ecco alcuni link codepen con cui giocare:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
Ecco una penna super cool che mostra e ti permette di giocare con quasi tutto in flexbox.
align-*proprietà possono anche spostare gli oggetti flessibili in orizzontale. Dipende dal flex-direction. stackoverflow.com/q/32551291/3597276
Trovo molto utile l'esempio http://flexboxfroggy.com/ .
Ci vorranno 10-20 minuti e al livello 21 troverai la risposta alla tua domanda. Ha menzionato:
align-content determina la spaziatura tra le linee, mentre align-items determina come gli elementi nel loro insieme sono allineati all'interno del contenitore. Quando esiste una sola riga, align-content non ha alcun effetto
Innanzitutto, align-itemsè per gli elementi in una singola riga. Quindi, per una singola riga di elementi sull'asse principale , align-itemsquesti elementi verranno allineati l'uno rispetto all'altro e inizierà con una nuova prospettiva dalla riga successiva.
Ora, align-contentnon interferisce con gli elementi di una riga ma con le righe stesse . Quindi, align-contentproverà ad allineare le file l'una rispetto all'altra e flettere il contenitore.
Controlla questo violino: https://jsfiddle.net/htym5zkn/8/
Ho avuto la stessa confusione. Dopo aver armeggiato in base a molte delle risposte sopra, posso finalmente vedere le differenze. A mio modesto parere, la distinzione è meglio dimostrata con un contenitore flessibile che soddisfa le seguenti due condizioni:
- Il contenitore flessibile stesso ha un vincolo di altezza (ad esempio,
min-height: 60rem) e quindi può diventare troppo alto per il suo contenuto - Gli articoli figlio racchiusi nel contenitore hanno altezze irregolari
La condizione 1 mi aiuta a capire cosa contentsignifica rispetto al suo contenitore padre. Quando il contenuto è a filo con il contenitore, non saremo in grado di vedere alcun effetto di posizionamento proveniente align-content. È solo quando abbiamo spazio extra lungo l'asse trasversale, iniziamo a vedere il suo effetto: allinea il contenuto rispetto ai confini del contenitore principale.
La condizione 2 mi aiuta a visualizzare gli effetti di align-items: allinea gli elementi l'uno rispetto all'altro.
Ecco un esempio di codice. Le materie prime provengono dal tutorial sulla griglia CSS di Wes Bos (21. Flexbox vs. CSS Grid)
- HTML di esempio:
<div class="flex-container">
<div class="item">Short</div>
<div class="item">Longerrrrrrrrrrrrrr</div>
<div class="item">💩</div>
<div class="item" id="tall">This is Many Words</div>
<div class="item">Lorem, ipsum.</div>
<div class="item">10</div>
<div class="item">Snickers</div>
<div class="item">Wes Is Cool</div>
<div class="item">Short</div>
</div>- Esempio CSS:
.flex-container {
display: flex;
/*dictates a min-height*/
min-height: 60rem;
flex-flow: row wrap;
border: 5px solid white;
justify-content: center;
align-items: center;
align-content: flex-start;
}
#tall {
/*intentionally made tall*/
min-height: 30rem;
}
.item {
margin: 10px;
max-height: 10rem;
}Esempio 1 : restringiamo il riquadro di visualizzazione in modo che il contenuto sia allineato al contenitore. Questo è quando align-content: flex-start;non ha effetti poiché l'intero blocco di contenuti è ben inserito all'interno del contenitore (non c'è spazio aggiuntivo per il riposizionamento!)
Inoltre, nota la seconda riga: guarda come gli elementi sono allineati al centro tra loro.
Esempio 2 : man mano che allarghiamo il viewport, non abbiamo più contenuti sufficienti per riempire l'intero contenitore. Ora iniziamo a vedere gli effetti di align-content: flex-start;--it allinea il contenuto rispetto al bordo superiore del contenitore.
Questi esempi sono basati su flexbox, ma gli stessi principi sono applicabili alla griglia CSS. Spero che sia di aiuto :)
Bene, li ho esaminati sul mio browser.
align-contentpuò cambiare l'altezza di una linea di direzione delle righe o la larghezza di colonna quando il suo valore viene stirata, o aggiungere spazio vuoto tra o intorno alle linee per space-between, space-around, flex-start, flex-end values.
align-itemspuò modificare l'altezza o la posizione degli oggetti all'interno dell'area della linea. Quando gli oggetti non sono avvolti hanno solo una linea la cui area è sempre estesa all'area della scatola flessibile (anche se gli oggetti traboccano) e align-contentnon ha alcun effetto su una singola linea. Quindi non ha alcun effetto sugli oggetti che non sono avvolti e align-itemspuò solo cambiare la posizione degli oggetti o allungarli quando tutti sono su una sola riga.
Tuttavia, se sono avvolti, ci sono più righe ed elementi all'interno di ciascuna riga. E se tutti gli elementi di ciascuna linea hanno la stessa altezza (per la direzione della riga) l'altezza di quella linea sarà uguale all'altezza di quegli elementi e non vedrai alcun effetto cambiando align-itemsvalore.
Quindi, se vuoi influenzare gli articoli align-itemsquando gli articoli sono avvolti e hanno la stessa altezza (per la direzione della riga), devi prima usare il align-contentvalore di stiramento per espandere l'area delle linee.
align-contenuti
align-contentcontrolla il posizionamento dell'asse trasversale (cioè verticale se flex-directionè row, e orizzontale se flex-directionè column) di più linee l'una rispetto all'altra.
(Pensa che le linee di un paragrafo siano distribuite verticalmente, accatastate verso l'alto, accatastate verso il basso. Questo è sotto un flex-directionparadigma di fila).
allineamento-articoli
align-items controlla l'asse trasversale di una singola linea di elementi flessibili.
(Pensa a come è allineata una singola riga di un paragrafo, se contiene del testo normale e del testo più alto come le equazioni matematiche. In tal caso, sarà la parte inferiore, superiore o centrale di ciascun tipo di testo in una riga che sarà essere allineato?)
Quello che ho imparato da ogni risposta e visitando il blog è
qual è l'asse trasversale e l'asse principale
- l'asse principale è una riga orizzontale e l'asse trasversale è una colonna verticale - per
flex-direction: row - l'asse principale è una colonna verticale e l'asse trasversale è una riga orizzontale - per
flex-direction: column
Ora allinea contenuto e allinea elementi
align-content è per la riga, funziona se il contenitore ha (più di una riga) Proprietà di align-content
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}align-items è per gli oggetti nella riga Proprietà di align-items
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}Per ulteriori visite di riferimento a flex
secondo quello che ho capito da qui :
quando si utilizza align-item o justify-item, si regola "il contenuto all'interno di un elemento della griglia lungo l'asse della colonna o l'asse della riga rispettivamente.
Ma: se si utilizza align-content o justify-content, si imposta la posizione di una griglia lungo l'asse della colonna o l'asse della riga. si verifica quando si dispone di una griglia in un contenitore più grande e la larghezza o l'altezza non sono flessibili (utilizzando px).