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

Свойствата на гъвкавост в CSS ви позволяват да подравнявате елементите по-гъвкаво и по-отзивчиво. Това го прави полезно, когато искате вашите HTML елементи да бъдат по-отзивчиви в уеб браузъра.

Тази статия ще разгледа как можете да използвате определени гъвкави свойства. Това включва свойствата flex-direction, justify-content, align-self, align-items, align-content и gap.

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

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

За да работи всеки гъвкав стил, ще трябва да добавите дисплей: гъвкав свойство към родителския flex контейнер.

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

Без flex, дъщерните divs се показват един след друг в колона надолу по страницата.

За да видите пример за тази настройка, вижте и изпълнете кода в това Фрагмент на CodePen.

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

В гъвкава посока свойството определя посоката на редове или колони на дъщерните елементи.

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

flex-direction: ред | колона | ред-обратен | колона-обратна

Ще трябва да добавите родителски контейнер около елементите, които искате да подравните.

HTML:

CSS:

.red { фон-цвят: червен; }
.orange { фон-цвят: оранжев; }
.yellow { фон-цвят: жълт; }
.green { фон-цвят: зелен;}
.blue { фон-цвят: син; }
.purple { фон-цвят: лилав; }
.parent div {
 ширина: 40px;
 височина: 40px;
}

Приложете свойството flex-direction към родителския flex контейнер. Това ще подравни дъщерните елементи div.

.parent {
 ширина: 300px;
 дисплей: гъвкав; 
 flex-direction: ред;
}

Много свойства на гъвкавост се отнасят до концепцията за главната ос и напречната ос. Когато flex-direction е ред, главната ос представлява хоризонталната посока, а напречната ос представлява вертикалната. Стойност на колона превключва тези оси.

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

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

В подравняване на елементи свойството контролира подравняването на елементите по напречната ос. За по подразбиране flex-direction, row, align-items контролира вертикалното подравняване на елементите.

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

align-items: flex-start | гъвкав край | подравняване на елементи | опъвам, разтягам

Добавете свойството align-items към родителския контейнер, за да подравните неговите дъщерни елементи.

.parent {
 дисплей: гъвкав; 
 align-items: flex-start;
}

Освен това можете да изберете да подравните елементите, като използвате базова линия. По подразбиране опцията за базова линия подравнява всички елементи въз основа на основата на елементите.

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

align-items: базова линия | първа изходна линия | последно изходно ниво;

За подравняване на елементи: базова линия за работа, уверете се, че всеки елемент има различна височина или ширина (в зависимост от оста, която използвате).

​​​

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

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

Можете да използвате подравняване-само свойство за отмяна на стила на подравняване на елементите на родителския контейнер. Това означава, че можете да зададете отделно гъвкаво подравняване на отделен елемент.

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

align-self: автоматично | гъвкаво стартиране | гъвкав край | център | изходна линия | опъвам, разтягам

Кажете например, че родителският контейнер има стил на гъвкава посока, зададен на "ред".

.parent {
 дисплей: гъвкав; 
 flex-direction: ред;
}

Можете да приложите свойството align-self към отделния елемент. Отделният елемент ще използва стила на свойството align-self и ще центрира елемента в родителския контейнер.

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

Как да разпределите линии по напречната ос

В align-content свойството подравнява децата по вертикалната ос. Може също да определи разстоянието между елементите, които са на няколко реда.

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

align-content: flex-start | гъвкав край | център | разтягане | пространство между | пространство наоколо

Добавете свойството align-content към родителския flex контейнер. Свойството align-content ще работи само ако е зададено свойството flex-wrap. Добавете flex-wrap: wrap към родителския контейнер и намалете ширината на родителския div, за да принудите елементите на повече от един ред.

.parent {
 flex-wrap: обвивка;
 дисплей: гъвкав;
 align-content: flex-start;
 ширина: 180px;
}

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

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

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

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

justify-content: flex-start | гъвкав край | център | пространство между | пространство наоколо | пространство-равномерно

Увийте елементите, които искате да подравните, под родителски flex контейнер.

HTML:

CSS:

.red { фон-цвят: червен; }
.green { фон-цвят: светлозелен; }
.blue { фон-цвят: син; }

Добавете свойството justify-content към родителския flex контейнер.

.parent {
 ширина: 300px;
 дисплей: гъвкав; 
 justify-content: flex-start;
}

Свойството justify-content също поддържа стойности, изброени в спецификацията на CSS Box Alignment. Това включва стойности като "начало", "край", "ляво" и "дясно". Някои браузъри не ги поддържат.

Свойството justify-content също има "безопасна" ключова дума, която можете да използвате. Това гарантира, че елементите се опитват да останат в обхвата на родителския контейнер.

Използва се и за предотвратяване на загуба на данни, в случай че центрирате дълга дума. Използването на ключовата дума safe предотвратява отрязването на първата и последната буква на по-кратък div.

.parent {
 дисплей: гъвкав; 
 justify-content: безопасен център;
}

Ключовата дума safe също е ограничена до определени браузъри. Можете да проверите съвместимостта на Мога ли да използвам.

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

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

В празнина свойството ви позволява да добавяте разстояние между елементите. Това е едно от по-нови CSS функции, които могат да ви помогнат да изградите адаптивно оформление.

Приложете свойството gap към родителския flex контейнер.

.parent {
 дисплей: гъвкав;
 празнина: 70px;
}

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

.parent { 
 ширина: 300px;
 празнина: 120px;
}

Ако използвате flex-wrap: wrap, за да избутате елементите на нов ред, размерът на празнината ще се приложи и към пространството между редовете.

.parent { 
 ширина: 300px;
 flex-wrap: обвивка;
 празнина: 120px;
}

Освен това можете също да зададете между редове и колонна празнина Имоти. Отново ще трябва да ги приложите към родителския flex контейнер.

Свойството row-gap определя разстоянието между всеки ред. Свойството column-gap определя пространството между всяка колона.

.parent { 
 между редове: 120px; 
}
.parent { 
 колонна празнина: 120px; 
}

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

Използване на още Flex свойства на вашия уебсайт

Надяваме се, че вече сте запознати с различните гъвкави свойства, които можете да използвате, за да подравните елементи на вашата уеб страница. Това включва как можете да използвате свойствата flex-direction, justify-content, align-self, align-items, align-content и gap.

Flexbox е мощна техника за оформление, но е само една малка част от CSS. Можете също да научите за нови CSS свойства, техники за чисто кодиране и инструменти, използвани за оптимизиране на CSS.

11 полезни инструмента за проверка, почистване и оптимизиране на CSS файлове

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

За автора