CSS - place-items (umieść element)
Opublikowano wto 31 marca 2020 w css • 1 min read
Deklaracja place-items (podobnie jak align-items) odnosi się do pozycjonowania dzieci elementu, których układ jest zależny od układu Flexbox lub Grid.
Deklaracja place-items jest połączeniem align-items oraz justify-items i przyjmuje podwójne wartości w odpowiadające kolejno za align-items o następnie za justify-items. Wymaga wcześniejszej deklaracji floatbox lub grid
Przykładowe zastosowanie
.item {
display: flex;
place-items: start center;
}
i odpowiada to:
.item {
display: grid;
align-items: start;
justify-items: center;
}
W momencie kidy jedna wartość jest wskazana, wówczas przyjęta jest ona jako wspólna dla obu właściwości
Przykładowe zastosowanie
.item {
display: flex;
place-items: start;
}
i odpowiada to:
.item {
display: flex;
align-items: start;
justify-items: start;
}
Przyjmuje wartości auto, normal, strech, start end, center, left, right, flex-start, flex-end, self-start, self-end, first-baseline, last-baseline
Źródło i polecane linki:
https://css-tricks.com/almanac/properties/p/place-items/
https://css-tricks.com/almanac/properties/a/align-items/