Какво е CSS Flexbox?
CSS Flexbox (Flexible Box Layout) е едноизмерен модел на оформление за разпределяне на пространство и подравняване на елементи в ред или колона. Flex контейнерът се дефинира с display: flex, а преките му деца стават flex елементи. Ключови свойства на контейнера: flex-direction (ред или колона), flex-wrap (един ред срещу многоредово), justify-content (подравняване по главната ос), align-items (подравняване по напречната ос за всеки ред) и align-content (подравняване по напречната ос на множество редове). Ключови свойства на елемента: flex-grow (колко расте елементът), flex-shrink (колко се свива), flex-basis (начален размер) и align-self (замества align-items на контейнера за конкретен елемент). Flexbox е идеален за навигационни ленти, редове с карти, централизирани оформления и всяко едноизмерно наредба.
Как да използвате CSS Flexbox Генератора
-
Коригирайте свойствата на контейнера (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) с помощта на падащите менюта и полето за въвеждане.
-
Кликнете върху произволен елемент в прегледа, за да го изберете (стaва оранжев).
-
Задайте flex-grow, flex-shrink, flex-basis и align-self на избрания елемент в панела за елементи.
-
Кликнете '+ Добави елемент', за да добавите повече елементи; кликнете 'Премахни', за да изтриете избрания елемент.
-
Превключвайте между разделите CSS и HTML, за да видите генерирания код, след което кликнете Копирай.
-
Кликнете 'Нулирай всичко', за да започнете отново с оформлението по подразбиране от 3 елемента.