Właściwość CSSGrid
justify-self
Wyrównuje pojedynczy element w jego komórce siatki wzdłuż osi poziomej.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- elementy grid i elementy pozycjonowane absolutnie
- JavaScript
element.style.justifySelf = "end"
Przykład
#CSS
.form {
display: grid;
gap: 10px;
}
.form button {
justify-self: end;
}HTML przykładu
<form class="form stage">
<input placeholder="Twój e-mail">
<button type="submit">Zapisz się</button>
</form>Podgląd
Definicja i zastosowanie
#Właściwość justify-self ustawiasz na elemencie siatki, żeby nadpisać justify-items kontenera. Element może rozciągnąć się na całą komórkę albo stanąć przy jej lewej krawędzi, prawej lub na środku.
Przydaje się, gdy jeden element w rzędzie ma inne wyrównanie, na przykład przycisk dosunięty do prawej w formularzu opartym na siatce.
W elementach flex ta właściwość jest ignorowana. W bloku pozycjonowanym absolutnie wpływa na położenie w bloku zawierającym.
Składnia
#Składnia
justify-self: auto | normal | stretch | start | end | center;Wartości
#Wartości w praktyce
#auto
Element słucha
justify-items kontenera, domyślnie się rozciąga..target { justify-self: auto; }start
Element 2 przylega do lewej krawędzi swojej komórki.
.target { justify-self: start; }center
Element 2 stoi na środku komórki.
.target { justify-self: center; }end
Element 2 przylega do prawej krawędzi komórki.
.target { justify-self: end; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- We Flexboxie zamiast
justify-selfużyj marginesuauto, np.margin-left: auto. - Skrót
place-selfustawia naraz wyrównanie w pionie i w poziomie.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.