place-itemsCSS-is olev kinnisvara on omaduste align-itemsja justify-itemsomaduste jaoks lühike , ühendades need üheks deklaratsiooniks.
Levinud on horisontaalse ja vertikaalse tsentreerimine võrguga:
.center-inside-of-me ( display: grid; place-items: center; )Neid omadusi on saanud kasutusele Flexboxi ja Gridi paigutuste kasutuselevõtt, kuid neid rakendatakse ka:
- Plokitaseme kastid
- Absoluutselt paigutatud kastid
- Absoluutselt paigutatud kastide staatiline asend
- Lauarakud
Süntaks
Atribuut aktsepteerib kahesuguseid väärtusi, esimene poolt align-itemsja teine eest justify-items. Värskendusena align-itemsjoondab sisu piki vertikaalset (veeru) telge, samal ajal justify-itemskui horisontaalset (rida) telge.
.item ( display: grid; place-items: start center; )See on sama mis kirjutamine:
.item ( display: grid; align-items: start; justify-items: center; )Kui antakse ainult üks väärtus, määrab see mõlemad omadused. Näiteks:
.item ( display: grid; place-items: start; )... on sama, mis see kirjutada:
.item ( display: grid; align-items: start; justify-items: start; )Aktsepteeritud väärtused
Selle omaduse teeb huvitavaks see, et see käitub kasutatava konteksti põhjal erinevalt. Näiteks kehtivad mõned väärtused ainult Flexboxi kohta ja need ei tööta ruudustikus. Lisaks kehtivad mõned väärtused align-itemsatribuudile, teised aga justify-itemsküljele.
Lisaks võib mõelda, et väärtused iseenesest langevad mitmesse joondustüüpi: kontekstuaalsed, jaotused, positsioonilised (mis muutuvad isepositsioonilisteks, kui neid paigutuses paigutatakse otse lapse elemendile) ja lähtejoon.
Rachel Andrew'l on suurepärane Box Alignmenti petulehekülg, mis aitab illustreerida väärtuste mõju.
| Väärtus | Tüüp | Kirjeldus |
|---|---|---|
auto | Kontekstuaalne | Väärtus kohandub vastavalt elemendi kontekstile. See kasutab justify-itemselemendi vanemelemendi väärtust. Kui pole vanemat või kui see on rakendatud elemendile, millega positsioneeritakse absolute, siis väärtus muutub normal. |
normal | Kontekstuaalne | Võtab paigutuse konteksti vaikekäitumise, kus seda rakendatakse. • Block tasandi paigutusega: start• Absoluutne positsioneerimine: startfor asendati absoluutse elemendid ja stretchkõigi teistega• Tabel paigutusega: Maksumus ignoreeritakse • FlexBox paigutusega: Maksumus ignoreeritakse • Grid paigutusega: stretch, kui pikkuse suhtega või olemuslikke sortimisel kasutatakse kus see käitub meeldibstart |
stretch | Levitamine | Laiendab elementi konteineri mõlemale servale vertikaalselt align-itemsja horisontaalselt justify-items. |
start | Asend | Kõik elemendid on joondatud konteineri alguses (vasakul) üksteise suhtes |
end | Asend | Kõik elemendid on joondatud konteineri otsaservas (paremal) üksteise suhtes |
center | Asend | Üksused on joondatud üksteise kõrval konteineri keskosa suunas |
left | Asend | Elemendid on joondatud üksteise kõrval konteineri vasaku külje suunas. Kui omadus pole paralleelne tavalise ülemise, parema, alumise, vasaku teljega, käitub see sarnaselt end. |
right | Asend | Üksused on joondatud üksteise kõrval konteineri parema külje suunas. Kui omadus pole paralleelne tavalise ülemise, parema, alumise, vasaku teljega, käitub see sarnaselt start. |
flex-start | Asend | Ainult flexboxi väärtus (see langeb tagasi start), kus esemed pakitakse konteineri algusserva poole. |
flex-end | Asend | Ainult flexboxi väärtus (see langeb tagasi end), kuhu üksused pakitakse konteineri lõppserva poole. |
self-start | Eneseasend | Võimaldab paigutuses oleval üksusel joonduda konteineri servale, lähtudes oma algupoolest. Põhimõtteliselt alistab määratud väärtus vanemal. |
self-end | Eneseasend | Lubab paigutuse üksusel konteineri positsiooniväärtuse pärimise asemel joonduda konteineri servale, lähtudes oma lõpuküljest. Põhimõtteliselt alistab määratud väärtus vanemal. |
first baselinelast baseline | Baasjoon | Joondab kõik rühma elemendid (st. Rea lahtrid), sobitades nende joondamise lähtejooned. Vaikimisi on see, firstkui baselineseda kasutatakse iseseisvalt. |
Brauseri tugi
See omadus sisaldub CSS-i kasti joondamise mudeli 3. taseme spetsifikatsioonis.
Brauseritugi on muutunud üsna laiaks ja suures osas lihtsalt kasutatavaks:
- Edge 79+ (pärast kroomi ülekannet)
- Firefox 45+
- Chrome 59+
- Safari 11+
Viited
- CSS kasti joondamise mudeli tase 3 - ametlik spetsifikatsioon, kus
place-itemsvara algselt määratletakse. - Mozilla arendajavõrk - Mozilla meeskonna dokumentatsioon.
- Box Alignment Cheat Sheet - Rachel Andrew ülevaade on väga kasulik ressurss joondusterminite ja nende määratluste mõistmiseks.