Гъвкав макет с Flexbox в CSS и HTML: Подробно ръководство

В това ръководство ще ти покажа как да създадеш гъвкав макет с три колони и три реда с CSS Flexbox. Този макет не само е лесен за изпълнение, но също така се адаптира динамично към наличното размери на екрана. Flexbox значително улеснява създаването на респонсивни дизайни и прави използването на по-стари техники на макет като Floatsили Inline-Block излишни.

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

• Flexbox ви позволява да създадете макети с помощта на само няколко реда CSS.
• Следващото ще ви покаже стъпка по стъпка как да създадете и промените макет с 3 колони и 3 реда.

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

Стъпка 1: Инициализирайте структурата на вашия HTML

Първо създайте основната структура на уебсайта си, използвайки три div елемента. Всеки div получава класа "Box". Те ще бъдат подредени по-късно в рамките на Flex Container.

Стъпка 2: Стилизирайте кутиите

Сега добавете CSS, за да дадете лек дизайн на кутиите с Padding и рамка. Използвайте box-sizing: border-box; за по-лесно управление на размерите.

Стъпка 3: Задайте Flex Container-a

Сега трябва да дефинирате горния контейнер като Flex Container. Задайте display: flex; и flex-direction: row;, за да подредите кутиите на ред. Всяко Box елемент трябва да зададе flex стойността си на 1, така че те равномерно да заемат наличното пространство.

Стъпка 4: Промяна на Flex стойностите

Тъй като всички кутии имат стойността flex: 1;, пространството се разпределя равномерно на всички три кутии. Можете да го тествате, като променяте размера на прозореца на браузъра.

Стъпка 5: Променете Flex свойствата

Ако желаете да контролирате Flex параметрите още по-точно, можете да зададете flex-grow: 0; за определени кутии. Това означава, че тези кутии няма да заемат допълнително пространство, когато контейнерът се разшири.

Стъпка 6: Приспособете Flex базата

За кутии, на които искате да зададете базовата ширина, можете да използвате flex-basis: 50px;. Така кутията ще има фиксирана ширина, а останалото пространство може гъвкаво да се разпредели на другите кутии.

Стъпка 7: Задайте височината в кутиите

Можете да зададете специфични височини за различните кутии, като промените flex-basis. Например задайте flex-basis: 50px; за горната кутия и flex-basis: 100px; за долната кутия.

Стъпка 8: Приспособете височината на контейнера

За да гарантирате, че кутиите се адаптират правилно, трябва да ограничите и височината на Flex Container. Например, задайте height: 400px;, така че средната кутия да заеме останалото пространство.

Стъпка 9: Оптимизиране на дизайна на макета

Ако искате да подобрите още повече макета, можете да промените свойствата на Flexbox според нуждите си. Прост justify-content или align-items може да дадат големи разлики в дизайна на макета.

Стъпка 10: Проверете респонсивния дизайн

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

Резюме

Сега научихте как да създадете и промените гъвкав макет с Flexbox в CSS и HTML. Чрез приспособяването на Flex стойностите и задаването на специфични височини и широчини можете лесно да създадете респонсивни дизайни. С Flexbox целият процес става много по-лесен.