Flexbox в CSS и HTML: Упътвания за подравняване в основната ос

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

Най-важни изводи

• Подреждането в главната ос се извършва с помощта на свойството justify-content.
• Можете да използвате различни стойности като center, flex-start, flex-end, space-between и space-around, за да настроите вашия дизайн.
• Настройките на Flexbox директно влияят на подреждането на елементите в желаната посока.

Стъпка по стъпка ръководство

1. Инициализирайте Флекс-контейнера

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

2. Стандартно подреждане на елементите

При поставяне на елементите в контейнера без специални настройки за стилизиране, ще забележите, че те се подреждат по подразбиране в началото на контейнера. Можете да им дадете ширина от 100 пиксела, за да ги илюстрирате.

3. Центрирано подреждане

За да центрирате елементите, използвайте CSS свойството justify-content със стойност center. Това води до подреждане на елементите в центъра на контейнера, което дава много атрактивно подреждане.

4. Подреждане на елементите в края

Ако искате да подредите елементите в края на контейнера, можете да използвате стойността flex-end за justify-content. Това премества елементите в края на вашия контейнер.

5. Подреждане на елементите в началото

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

6. Промяна на Флекс-насоченост

Ако промените Флекс-насочеността на column, главната ос се променя от хоризонтална на вертикална. Това води до подреждането на елементите отгоре надолу.

7. Центриране на елементите в вертикално подреждане

Можете също да центрирате елементите в този нов режим на подреждане, като използвате justify-content: center. Това настройка води до показване на всички елементи в средата на контейнера.

8. Подреждане в долната част

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

9. Използване на пространствени свойства

Flexbox ви позволява също да контролирате разстоянието между вашите елементи чрез space-between, space-around и space-evenly. Тези свойства разпределят наличното място по различни начини.

10. Използване на Space-Between

Със задаването на justify-content: space-between първият елемент се задържа в горната част, а последният в долната част на контейнера, като разстоянието между елементите се разпределя равномерно.

11. Опитайте "Space-Around"

Когато използвате space-around, се създава равномерно разстояние около всяки елемент. Този разстояние става видим в средата на контейнера, докато елементите остават равномерно разпределени.

12. Използване на "Space-Evenly"

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

Обобщение

В това ръководство научихте как да настроите подравняването по основната ос с Flexbox. Чрез използване на justify-content можете да направите позиционирането на елементите си много гъвкаво. Също така научихте различни свойства, които ви помагат да постигнете желан макет. Използвайте тези познания, за да създадете привлекателни и потребителски ориентирани дизайни!