Как да използвате Flex, за да направите уебсайта си по-отзивчив

Съвременният дизайн на уебсайтове трябва да реагира на промените в съдържанието или размера на браузъра. Можете да постигнете това с помощта на ванилен CSS, медийни заявки или flexbox.

Някои гъвкави свойства, като flex-wrap или flex-grow, могат да променят размера или местоположението на елемент по визуално привлекателен начин. Тази статия ще разгледа примери за това как можете да използвате свойствата flex-grow, flex-shrink, flex-wrap, flex-flow и order flex.

Как да настроите CSS Flex Display

Ако не сте запознати с основите на flexbox, можете да проучите това Фрагмент на CodePen. Той включва примерен код за проста настройка на flexbox. Първо, ще трябва да увиете дъщерните елементи под родителски div или "flex контейнер".

<div клас="родител">
<div клас="дете-предмет"></div>
<div клас="дете-предмет"></div>
<div клас="дете-предмет"></div>
</div>

Добавете дисплей: гъвкав свойство към родителския div.

.родител {
 дисплей: гъвкав;
}

Как да отглеждате предмети в контейнер

В flex-grow свойството позволява на дъщерните елементи да се разширяват, за да запълнят наличното пространство в родителския div. Това свойство ви позволява да зададете "съотношение" на пространството, което всеки елемент от кутията може да заема.

За да добавите flex-grow, добавете свойството flex-grow CSS към всеки от дъщерните елементи.

<div клас="родител">
<div style="цвят на фона: червен; flex-grow: 1"></div>
<div style="цвят на фона: оранжев; flex-grow: 1"></div>
<div style="цвят на фона: жълт; flex-grow: 1"></div>
<div style="цвят на фона: зелен; flex-grow: 3"></div>
<div style="цвят на фона: син; flex-grow: 1"></div>
</div>

.родител {
 ширина: 500px;
 дисплей: гъвкав; 
}

Flex-grow от 0 за всеки елемент означава, че кутиите няма да се разширяват, за да запълнят пространството на своя родител. 0 е стойността по подразбиране за това свойство.

Flex-grow от 1 за всеки елемент ще принуди всички кутии да се разширяват еднакво, за да паснат на наличното пространство вътре в родителя.

Ако един от елементите има по-голямо гъвкаво нарастване, например:

<div style="цвят на фона: зелен; flex-grow: 3"></div>

Зелената кутия ще се опита да спечели до три пъти повече пространство от останалите кутии.

Вижте кода за свойството flex-grow в това Фрагмент на CodePen за да видите работещ пример.

Как да свиете елементите в контейнер

В някои случаи ширината на родителя може да се свие и елементите вътре в родителя вече няма да се поберат вътре. Можете да използвате гъвкаво свиване свойство да свива размера на кутиите. По този начин те могат да останат вътре в родителя.

Flex-shrink ви позволява да зададете съотношение за колко всеки елемент трябва да се свие.

Добавете свойството flex-shrink към дъщерните div елементи. Променете ширините на родител и деца, така че елементите да не се побират в контейнера.

<div клас="родител">
<div style="цвят на фона: червен; гъвкаво свиване: 1"></div>
<div style="цвят на фона: оранжев; гъвкаво свиване: 1"></div>
<div style="цвят на фона: жълт; гъвкаво свиване: 1"></div>
<div style="цвят на фона: зелен; гъвкаво свиване: 2"></div>
<div style="цвят на фона: син; гъвкаво свиване: 1"></div>
</div>

.родител {
 ширина: 500px;
 дисплей: гъвкав; 
}
.родител div {
 ширина: 150px;
 височина: 150px;
}

Flex-свиване от 1 за всички елементи означава, че всички елементи ще се свият еднакво, ако ширината на родителя бъде намалена.

Ако някой от елементите е с по-голямо гъвкаво свиване, например:

<div style="цвят на фона: зелен; гъвкаво свиване: 2"></div>

Зелената кутия ще се опита да се свие два пъти повече от другите кутии.

Вижте кода за свойството flex-shrink в това Фрагмент на CodePen за да видите работещ пример.

Как да избутате елементи към следващия ред

В гъвкава обвивка свойството ви позволява да избутвате елементи на следващия ред, ако не се побират в ширината на родителския контейнер. Тук елементите не се свиват и ще можете да запазите височината и ширината на елементите.

Опциите за свойството flex-wrap включват:

flex-wrap: nowrap | обвивам | обвиване-обратно

Добавете свойството flex-wrap към родителския flex-контейнер. Уверете се, че ширината на контейнера е достатъчно малка, така че да не побира дъщерните елементи в него. Това ще принуди всички препълващи елементи на нов ред.

<div клас="родител">
<div клас="червен"></div>
<div клас="оранжево"></div>
<div клас="жълто"></div>
<div клас="зелено"></div>
<div клас="син"></div>
</div>

.родител {
 ширина: 300px;
 граница: 1px плътно черно;
 дисплей: гъвкав;
 flex-wrap: обвивка;
}
.родител div {
 ширина: 100px;
 височина: 100px;
}

Стойността на обвиването ще позиционира елементите, започващи в горния десен ъгъл на контейнера. Стойността за преобръщане ще препозиционира елементите, за да започнат в долния десен ъгъл на контейнера. Когато опаковате елементите, той ще избута елементите на нов ред отгоре, вместо отдолу.

Ако посочите височина на родителския контейнер, контейнерът ще добави разстояние между редовете с елементи.

Ако искате да премахнете това разстояние, но да запазите височината на родителския div, използвайте свойството align-content. Посочете свойството align-content като "flex-start" в родителския div:

.родител { 
 ширина: 300px; 
 височина: 300px;
 граница: 1px плътно черно; 
 дисплей: гъвкав;
 flex-wrap: обвивка; 
 align-content: flex-започнете;
}

Свойството align-content е едно от няколко основни свойства на flexbox, които ви позволяват да контролирате подравняването.

Вижте кода за свойството flex-wrap в това Фрагмент на CodePen за да видите някои примери.

Как да преместите елементи в следващата колона

Ако използвате различно оформление (като колона) и все още имате нужда от елементите за обвиване, можете да използвате flex-flow Имот. Това свойство flex е комбинация от свойствата flex-wrap и flex-direction.

Примерни комбинации от опции, които можете да използвате за свойството flex-flow, включват:

flex-wrap: row nowrap | колона nowrap | обвиване на ред | обвивка на колоната | row wrap-reverse | обвиване на колона-обратно

Това свойство работи подобно на свойството flex-wrap по-горе. Добавете flex-flow към родителския flex контейнер. Уверете се, че ширината на родителския контейнер е достатъчно малка, за да принуди дъщерните елементи да се обвият:

.родител {
 ширина: 300px; 
 граница: 1px плътно черно; 
 дисплей: гъвкав; 
 flex-flow: обвиване на колоната;
}
.родител div {
 ширина: 100px;
 височина: 100px;
}

Елементите ще се увиват в определената посока (ред или колона).

Вижте кода за свойството flex-flow в това Фрагмент на CodePen за да видите някои примери.

Как да промените реда на елементите

Ако трябва да пренаредите елементите на страницата поради някакъв вид динамични данни, можете да използвате поръчка flex property. Това свойство ви позволява да зададете реда, в който се появява всеки елемент.

Не е задължително числата да започват от 1. Можете да използвате произволни числа и интервали, а свойството order ще подреди HTML елементите от най-ниското към най-високото.

Добавете свойството поръчка към всеки от елементите в родителския flex контейнер:

<div клас="родител">
<div клас="червен" стил="поръчка: 2"></div>
<div клас="оранжево" стил="поръчка: 1"></div>
<div клас="жълто" стил="поръчка: 5"></div>
<div клас="зелено" стил="поръчка: 4"></div>
<div клас="син" стил="поръчка: 3"></div>
</div>

В този случай оранжевото поле ще бъде най-вдясно, последвано от червено, синьо, зелено и след това жълто полета.

Вижте кода за свойството поръчка в това Фрагмент на CodePen за да видите някои примери.

Експериментирайте с повече CSS свойства във вашия уебсайт

Можете да използвате тези flex свойства, за да направите уебсайта си по-отзивчив. Това включва използването на свойствата flex-grow, flex-shrink, flex-wrap, flex-flow и order flex.

Можете също така да научите за повече гъвкави свойства, които да ви помогнат да подравните HTML елементите на вашия уебсайт.

Как да използвате Flex за подравняване на HTML елементи

Прочетете Следващото

За автора