Flexbox w CSS — podstawy i gotowe układy
Jak działają osie, kiedy użyć justify-content i align-items oraz jak szybko zrobić menu, karty i wyśrodkowanie.
Podstawa
.kontener { display: flex; gap: 12px; }
Flexbox układa elementy wzdłuż jednej głównej osi. Najszybciej zrozumiesz go, zmieniając opcje w generatorze Flexbox.
Najważniejsze właściwości
flex-direction— kierunek,justify-content— rozkład na osi głównej,align-items— wyrównanie na osi poprzecznej,flex-wrap— przenoszenie do kolejnej linii,gap— odstęp.
Trzy gotowe wzory
wyśrodkowanie: justify-content: center; align-items: center; menu: justify-content: space-between; karty: flex-wrap: wrap; gap: 16px;
Dobór jednostek ułatwi przelicznik px na rem, a głębię kart dodasz w generatorze cieni (zob. cienie w projektowaniu). Układ strony możesz wcześniej zaplanować według poradnika makieta strony.
Narzędzia do tego poradnika
Generator Flexbox CSS — układ z podglądemProgramowanie i WWWUstaw kierunek, wyrównanie, zawijanie i odstępy elementów, zobacz układ na żywo i skopiuj gotowy kod CSS.Generator cieni CSS (box-shadow) i zaokrągleńProgramowanie i WWWZaprojektuj cień elementu suwakami — przesunięcie, rozmycie, rozciągnięcie, kolor, krycie, cień wewnętrzny, dwie warstwy — razem z zaokrągleniem rogów, z podglądem na żywo i gotowym kodem CSS.Konwerter px ↔ rem, em i pt (CSS)Programowanie i WWWPrzelicz piksele na rem (i odwrotnie) dla dowolnego rozmiaru bazowego czcionki, a także na punkty — z tabelą najczęstszych rozmiarów i gotowym kodem CSS.
CSSFlexboxukład stronyfrontend
Przeczytaj też
Programowanie i tworzenie stronSzybka makieta strony — rem, gradienty, placeholdery i Lorem ipsumProgramowanie i tworzenie stronCienie i głębia w projektowaniu stron — jak używać box-shadow z wyczuciemProgramowanie i tworzenie stronCSS Grid — podstawy i gotowe układy stronProgramowanie i tworzenie stronZaokrąglone rogi w CSS — border-radius w praktyce