Jak używać Flex do wyrównywania elementów HTML

Właściwości flex w CSS pozwalają na bardziej elastyczne i responsywne wyrównywanie elementów. Jest to przydatne, gdy chcesz, aby elementy HTML były bardziej responsywne w przeglądarce internetowej.

W tym artykule omówimy, jak korzystać z niektórych właściwości flex. Obejmuje to właściwości flex-direction, justify-content, align-self, align-items, align-content i gap.

Jak skonfigurować wyświetlanie CSS Flex

Przykładowa struktura, której możesz użyć do eksploracji podstawy flexboxa to zestaw elementów div podrzędnych pod jednym elementem div nadrzędnym. W poniższym kodzie znajduje się główny „rodzic” div. Trzy elementy div podrzędne reprezentują elementy, które można wyrównać za pomocą właściwości flex.

Aby każda stylizacja flex działała, musisz dodać wyświetlacz: elastyczny właściwość do nadrzędnego kontenera elastycznego.

.rodzic {
 wyświetlacz: elastyczny;
}

Bez flex, elementy div podrzędne wyświetlają się jeden po drugim w formacji kolumnowej w dół strony.

Aby zobaczyć przykład tej konfiguracji, wyświetl i uruchom kod w tym Fragment kodu CodePen.

Jak kontrolować kierunek układu

ten kierunek ugięcia właściwość określa kierunek wiersza lub kolumny elementów podrzędnych.

Opcje właściwości flex-direction obejmują:

kierunek ugięcia: wiersz | kolumna | rząd-rewers | kolumna-rewers

Będziesz musiał dodać kontener nadrzędny otaczający elementy, które chcesz wyrównać.

HTML:

CSS:

.red { kolor tła: czerwony; }
.pomarańczowy { kolor tła: pomarańczowy; }
.żółty { kolor tła: żółty; }
.green { kolor tła: zielony;}
.niebieski { kolor tła: niebieski; }
.fioletowy { kolor tła: fioletowy; }
.parent div {
 szerokość: 40px;
 wysokość: 40px;
}

Zastosuj właściwość flex-direction do nadrzędnego kontenera flex. Spowoduje to wyrównanie elementów div podrzędnych.

.rodzic {
 szerokość: 300px;
 wyświetlacz: elastyczny; 
 kierunek ugięcia: rząd;
}

Wiele właściwości elastycznych odnosi się do koncepcji osi głównej i osi poprzecznej. Kiedy kierunek flex to wiersz, oś główna reprezentuje kierunek poziomy, a oś poprzeczna reprezentuje kierunek pionowy. Wartość kolumny przełącza te osie.

Zobacz kod dla właściwości flex-direction w tym Fragment kodu CodePen aby zobaczyć kilka przykładów.

Jak wyrównać przedmioty wzdłuż osi krzyżowej

ten wyrównaj-elementy właściwość kontroluje wyrównanie elementów wzdłuż osi poprzecznej. Dla domyślnego flex-direction, row, align-items kontroluje pionowe wyrównanie elementów.

Opcje właściwości align-items obejmują:

align-pozycje: flex-start | elastyczny koniec | wyrównaj-elementy | rozciągać

Dodaj właściwość align-items do kontenera nadrzędnego, aby wyrównać jego elementy podrzędne.

.rodzic {
 wyświetlacz: elastyczny; 
 align-pozycje: flex-start;
}

Dodatkowo możesz wybrać wyrównanie elementów za pomocą linii bazowej. Domyślnie opcja linii bazowej wyrównuje wszystkie elementy na podstawie podstawy elementów.

Możesz także wybrać miejsce, od którego zaczyna się linia bazowa, na przykład góra (pierwsza linia bazowa) lub dół (ostatnia linia bazowa).

align-pozycje: linia bazowa | pierwsza linia bazowa | ostatnia linia bazowa;

Aby wyrównać elementy: linia bazowa do pracy, upewnij się, że każdy element ma inną wysokość lub szerokość (w zależności od używanej osi).

​​​

Zobacz kod właściwości align-items w tym Fragment kodu CodePen aby zobaczyć kilka przykładów.

Jak pominąć wyrównanie w poszczególnych elementach

Możesz użyć wyrównać się właściwość, aby zastąpić wszelkie style align-items kontenera nadrzędnego. Oznacza to, że możesz ustawić osobne wyrównanie flex dla pojedynczego elementu.

Opcje właściwości align-self obejmują:

wyrównaj się: auto | elastyczny start | elastyczny koniec | centrum | linia bazowa | rozciągać

Powiedzmy na przykład, że kontener nadrzędny ma styl flex-direction ustawiony na „wiersz”.

.rodzic {
 wyświetlacz: elastyczny; 
 kierunek ugięcia: rząd;
}

Możesz zastosować właściwość align-self do pojedynczego elementu. Pojedynczy element użyje stylu właściwości align-self i wyśrodkuje element w kontenerze nadrzędnym.

Zobacz kod właściwości align-self w tym Fragment kodu CodePen aby zobaczyć kilka przykładów.

Jak rozmieścić linie na osi poprzecznej

ten wyrównaj zawartość właściwość wyrównuje dzieci wzdłuż osi pionowej. Może również określać odstępy między elementami znajdującymi się w wielu wierszach.

Opcje właściwości align-content obejmują:

wyrównaj-treść: flex-start | elastyczny koniec | centrum | rozciąganie | odstęp między | kosmiczna przestrzeń

Dodaj właściwość align-content do nadrzędnego kontenera Flex. Właściwość align-content będzie działać tylko wtedy, gdy ustawiona jest właściwość flex-wrap. Dodaj flex-wrap: wrap do kontenera nadrzędnego i zmniejsz szerokość nadrzędnego elementu div, aby wymusić na elementach więcej niż jedną linię.

.rodzic {
 flex-wrap: owijka;
 wyświetlacz: elastyczny;
 wyrównaj zawartość: flex-start;
 szerokość: 180px;
}

Zobacz kod właściwości align-content w tym Fragment kodu CodePen aby zobaczyć kilka przykładów.

Jak wyrównać elementy na osi głównej

ten uzasadnić-treść właściwość dodaje wyrównanie do prawej, lewej lub do środka do elementów podrzędnych. Rozmieszcza również elementy, dodając spacje między nimi podczas uzasadniania treści.

Opcje właściwości justify-content obejmują:

uzasadnić-treść: flex-start | elastyczny koniec | centrum | odstęp między | kosmos | równomiernie w przestrzeni

Owiń elementy, które chcesz wyrównać, pod nadrzędnym kontenerem elastycznym.

HTML:

CSS:

.red { kolor tła: czerwony; }
.zielony { kolor tła: jasnozielony; }
.niebieski { kolor tła: niebieski; }

Dodaj właściwość justify-content do nadrzędnego kontenera elastycznego.

.rodzic {
 szerokość: 300px;
 wyświetlacz: elastyczny; 
 uzasadnić-treść: flex-start;
}

Właściwość justify-content obsługuje również wartości wymienione w specyfikacji CSS Box Alignment. Obejmuje to wartości takie jak „początek”, „koniec”, „lewo” i „prawo”. Niektóre przeglądarki ich nie obsługują.

Właściwość justify-content zawiera również „bezpieczne” słowo kluczowe, którego możesz użyć. Gwarantuje to, że elementy starają się pozostać w zasięgu kontenera nadrzędnego.

Służy również do zapobiegania utracie danych w przypadku wyśrodkowania długiego słowa. Użycie słowa kluczowego safe zapobiega odcinaniu przez krótsze div pierwszej i ostatniej litery.

.rodzic {
 wyświetlacz: elastyczny; 
 uzasadnić-treść: bezpieczne centrum;
}

Bezpieczne słowo kluczowe jest również ograniczone do niektórych przeglądarek. Możesz sprawdzić kompatybilność na Mogę uzyć.

Zobacz kod właściwości justify-content w tym Fragment kodu CodePen aby zobaczyć kilka przykładów.

Jak dodać odstępy między przedmiotami

ten luka właściwość pozwala dodać ilość miejsca między elementami. To jeden z nowsze funkcje CSS, które pomogą Ci zbudować responsywny układ.

Zastosuj właściwość przerwy do nadrzędnego kontenera elastycznego.

.rodzic {
 wyświetlacz: elastyczny;
 odstęp: 70px;
}

Jeśli dodasz przerwę, która wymusza, aby długość elementów przekraczała szerokość elementu nadrzędnego, elementy zmniejszą się, aby zmieścić się w rzędzie.

.rodzic { 
 szerokość: 300px;
 odstęp: 120px;
}

Jeśli użyjesz funkcji flex-wrap: wrap, aby przesunąć elementy do nowej linii, wielkość przerwy będzie miała zastosowanie również do przestrzeni między wierszami.

.rodzic { 
 szerokość: 300px;
 flex-wrap: owijka;
 odstęp: 120px;
}

Dodatkowo możesz również ustawić między wierszami oraz kolumna-przerwa nieruchomości. Ponownie, będziesz musiał zastosować je do nadrzędnego kontenera elastycznego.

Właściwość row-gap określa odstęp między każdym wierszem. Właściwość column-gap określa odstęp między każdą kolumną.

.rodzic { 
 odstęp między wierszami: 120px; 
}
.rodzic { 
 odstęp między kolumnami: 120px; 
}

Zobacz kod dla właściwości gap w tym Fragment kodu CodePen aby zobaczyć kilka przykładów.

Korzystanie z większej liczby właściwości Flex w swojej witrynie

Mamy nadzieję, że znasz już różne właściwości flex, których możesz użyć do wyrównania elementów na swojej stronie internetowej. Obejmuje to sposób korzystania z właściwości flex-direction, justify-content, align-self, align-items, align-content i gap.

Flexbox to potężna technika projektowania, ale to tylko niewielka część CSS. Możesz także dowiedzieć się o nowych właściwościach CSS, czystych technikach kodowania i narzędziach używanych do optymalizacji CSS.

11 przydatnych narzędzi do sprawdzania, czyszczenia i optymalizacji plików CSS

Czytaj dalej

O autorze