Edytor Flexbox
Bezpłatny online edytor rozmieszczenia elementów w formacie Flexbox, z wizualną prezentacją w czasie rzeczywistym
Referencja właściwości Flexbox
flex-direction: row | column | row-reverse | column-reverse. justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly. align-items: stretch | flex-start | center | flex-end | baseline. flex-wrap: nowrap | wrap. gap: odstępy między elementami.
Jak używać edytora Flexbox
Dostosuj właściwości kontenera flex za pomocą kontrolek. Podgląd pokazuje, jak elementy są ułożone w czasie rzeczywistym. Dodawaj lub usuwaj elementy, aby testować różne konfiguracje. Skopiuj wygenerowany CSS do swojego projektu.
▶Jaka jest różnica między justify-content a align-items?
justify-content kontroluje wyrównanie wzdłuż osi głównej (poziomo dla row, pionowo dla column). align-items kontroluje wyrównanie wzdłuż osi poprzecznej (prostopadłej do osi głównej).
▶Jak wyśrodkować element za pomocą Flexbox?
Ustaw rodzica na display: flex; justify-content: center; align-items: center; To centruje element podrzędny zarówno poziomo, jak i pionowo.
▶Co robi flex-wrap?
Domyślnie elementy flex próbują zmieścić się w jednej linii (nowrap). Ustawienie flex-wrap: wrap pozwala elementom przechodzić do następnej linii, gdy brakuje miejsca.
Jeśli ten tool był dla ciebie przydatny, pomyśl o tym, aby kupić mi kawę.
Kup mi kawę.