Jak korzystać z Flex, aby Twoja witryna była bardziej responsywna?

Nowoczesne projekty stron internetowych muszą być responsywne na zmiany zawartości lub rozmiaru przeglądarki. Możesz to osiągnąć za pomocą waniliowego CSS, zapytań o media lub flexbox.

Niektóre właściwości flex, takie jak flex-wrap lub flex-grow, mogą zmienić rozmiar lub położenie elementu w atrakcyjny wizualnie sposób. W tym artykule omówimy przykłady wykorzystania właściwości flex-grow, flex-shrink, flex-wrap, flex-flow i order flex.

Jak skonfigurować wyświetlanie CSS Flex

Jeśli nie znasz podstawy flexboxa, możesz to zbadać Fragment kodu CodePen. Zawiera przykładowy kod do prostej konfiguracji flexbox. Najpierw musisz zawinąć elementy podrzędne pod nadrzędnym div lub „flex container”.

<klasa div="rodzic">
<klasa div="element podrzędny"></div>
<klasa div="element podrzędny"></div>
<klasa div="element podrzędny"></div>
</div>

Dodaj wyświetlacz: elastyczny własność do nadrzędnego div.

.rodzic {
 wyświetlacz: elastyczny;
}

Jak uprawiać przedmioty w pojemniku

ten elastyczny wzrost pozwala elementom potomnym rozwinąć się, aby wypełnić przestrzeń dostępną w jego nadrzędnym div. Ta właściwość umożliwia określenie „stosunku” ilości miejsca, jaką może zająć każdy element pudełka.

Aby dodać flex-grow, dodaj właściwość CSS flex-grow do każdego elementu podrzędnego.

<klasa div="rodzic">
<styl div="kolor tła: czerwony; elastyczny wzrost: 1"></div>
<styl div="kolor tła: pomarańczowy; elastyczny wzrost: 1"></div>
<styl div="kolor tła: żółty; elastyczny wzrost: 1"></div>
<styl div="kolor tła: zielony; elastyczny wzrost: 3"></div>
<styl div="kolor tła: niebieski; elastyczny wzrost: 1"></div>
</div>

.rodzic {
 szerokość: 500px;
 wyświetlacz: elastyczny; 
}

Elastyczny wzrost równy 0 dla każdego elementu oznacza, że ​​pudełka nie rozszerzą się, aby wypełnić przestrzeń ich rodzica. 0 jest wartością domyślną tej właściwości.

Elastyczny wzrost o 1 dla każdego elementu wymusi jednakowe rozszerzenie wszystkich pudełek, aby zmieściły się w dostępnej przestrzeni wewnątrz rodzica.

Jeśli jeden z elementów miał większy flex, na przykład:

<styl div="kolor tła: zielony; elastyczny wzrost: 3"></div>

Zielone pudełko będzie próbowało uzyskać do trzech razy więcej miejsca niż inne pudełka.

Zobacz kod dla właściwości flex-grow w tym Fragment kodu CodePen aby zobaczyć działający przykład.

Jak zmniejszać przedmioty w pojemniku

W niektórych przypadkach szerokość rodzica może się zmniejszyć, a elementy wewnątrz rodzica nie będą się już w nim mieścić. Możesz użyć flex-skurcz właściwość, aby zmniejszyć rozmiar pudełek. W ten sposób mogą pozostać zamknięte w rodzicu.

Funkcja Flex-shrink umożliwia określenie współczynnika skurczenia każdego elementu.

Dodaj właściwość flex-shrink do podrzędnych elementów div. Zmień szerokość rodzica i dziecka, aby przedmioty nie pasowały do ​​pojemnika.

<klasa div="rodzic">
<styl div="kolor tła: czerwony; flex-skurcz: 1"></div>
<styl div="kolor tła: pomarańczowy; flex-skurcz: 1"></div>
<styl div="kolor tła: żółty; flex-skurcz: 1"></div>
<styl div="kolor tła: zielony; flex-skurcz: 2"></div>
<styl div="kolor tła: niebieski; flex-skurcz: 1"></div>
</div>

.rodzic {
 szerokość: 500px;
 wyświetlacz: elastyczny; 
}
.rodzic dziel {
 szerokość: 150px;
 wysokość: 150px;
}

Flex-shrink równy 1 dla wszystkich elementów oznacza, że ​​wszystkie elementy skurczą się równo, jeśli szerokość rodzica zostanie zmniejszona.

Jeśli jeden z elementów miał większy flex-shrink, na przykład:

<styl div="kolor tła: zielony; flex-skurcz: 2"></div>

Zielone pudełko będzie próbowało skurczyć się dwa razy bardziej niż pozostałe.

Zobacz kod właściwości flex-shrink w tym Fragment kodu CodePen aby zobaczyć działający przykład.

Jak przesuwać przedmioty do następnego rzędu

ten flex-wrap Właściwość umożliwia wypchnięcie elementów do następnego wiersza, jeśli nie mieszczą się one w szerokości kontenera nadrzędnego. Tutaj przedmioty nie kurczą się i będziesz mógł zachować wysokość i szerokość przedmiotów.

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

flex-wrap: nowrap | okład | zawijanie-odwrotne

Dodaj właściwość flex-wrap do nadrzędnego kontenera flex. Upewnij się, że szerokość pojemnika jest wystarczająco mała, aby nie zmieściły się w nim przedmioty podrzędne. Spowoduje to, że wszelkie przepełnione elementy zostaną umieszczone w nowym rzędzie.

<klasa div="rodzic">
<klasa div="czerwony"></div>
<klasa div="Pomarańczowy"></div>
<klasa div="żółty"></div>
<klasa div="Zielony"></div>
<klasa div="niebieski"></div>
</div>

.rodzic {
 szerokość: 300px;
 obramowanie: 1px jednolita czerń;
 wyświetlacz: elastyczny;
 flex-wrap: owijka;
}
.rodzic dziel {
 szerokość: 100px;
 wysokość: 100px;
}

Wartość zawijania umieści elementy, zaczynając od prawego górnego rogu kontenera. Wartość wrap-reverse zmieni położenie elementów tak, aby zaczynały się w prawym dolnym rogu kontenera. Podczas owijania przedmiotów będzie przesuwał przedmioty w nowym rzędzie powyżej, a nie poniżej.

Jeśli określisz wysokość w kontenerze nadrzędnym, kontener doda odstępy między rzędami elementów.

Jeśli chcesz usunąć te odstępy, ale zachować wysokość nadrzędnego elementu div, użyj właściwości align-content. Określ właściwość align-content jako „flex-start” w nadrzędnym div:

.rodzic { 
 szerokość: 300px; 
 wysokość: 300px;
 obramowanie: 1px jednolita czerń; 
 wyświetlacz: elastyczny;
 flex-wrap: owijka; 
 wyrównaj zawartość: flex-początek;
}

Właściwość align-content jest jedną z kilku podstawowych Właściwości flexboxa, które pozwalają kontrolować wyrównanie.

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

Jak przenieść elementy do następnej kolumny

Jeśli używasz innego układu (np. kolumny) i nadal potrzebujesz elementów do zawinięcia, możesz użyć elastyczny przepływ własność. Ta właściwość flex jest kombinacją właściwości flex-wrap i flex-direction.

Przykładowe kombinacje opcji, których można użyć we właściwości flex-flow obejmują:

flex-wrap: wiersz nowrap | kolumna nowrap | zawijanie wierszy | zawijanie kolumn | zawijanie wiersza-odwrotne | Zawijanie kolumny-odwrotna

Ta właściwość działa podobnie do właściwości flex-wrap powyżej. Dodaj flex-flow do nadrzędnego kontenera flex. Upewnij się, że szerokość kontenera nadrzędnego jest wystarczająco mała, aby wymusić zawijanie elementów podrzędnych:

.rodzic {
 szerokość: 300px; 
 obramowanie: 1px jednolita czerń; 
 wyświetlacz: elastyczny; 
 flex-flow: owijanie kolumny;
}
.rodzic dziel {
 szerokość: 100px;
 wysokość: 100px;
}

Pozycje zawijają się w określonym kierunku (wiersz lub kolumna).

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

Jak zmienić kolejność przedmiotów

Jeśli musisz zmienić układ elementów na stronie z powodu jakichkolwiek dynamicznych danych, możesz użyć zamówienie właściwość elastyczna. Ta właściwość umożliwia określenie kolejności, w jakiej pojawia się każdy element.

Liczby niekoniecznie muszą zaczynać się od 1. Możesz użyć dowolnych liczb i interwałów, a właściwość order uporządkuje elementy HTML od najniższego do najwyższego.

Dodaj właściwość order do każdego elementu w nadrzędnym kontenerze elastycznym:

<klasa div="rodzic">
<klasa div="czerwony" styl="kolejność: 2"></div>
<klasa div="Pomarańczowy" styl="kolejność: 1"></div>
<klasa div="żółty" styl="zamówienie: 5"></div>
<klasa div="Zielony" styl="kolejność: 4"></div>
<klasa div="niebieski" styl="kolejność: 3"></div>
</div>

W takim przypadku pomarańczowe pole będzie znajdować się po prawej stronie, a następnie czerwone, niebieskie, zielone, a następnie żółte.

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

Eksperymentuj z większą liczbą właściwości CSS w swojej witrynie

Możesz użyć tych elastycznych właściwości, aby Twoja witryna była bardziej responsywna. Obejmuje to używanie właściwości flex-grow, flex-shrink, flex-wrap, flex-flow i order flex.

Możesz również dowiedzieć się więcej o właściwościach flex, które pomogą Ci wyrównać elementy HTML w Twojej witrynie.

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

Czytaj dalej

O autorze