Шта је CSS Flexbox?
CSS Flexbox (Flexible Box Layout) је једнодимензионални модел распореда за дистрибуцију простора и поравнавање ставки у реду или колони. Flex контејнер се дефинише са display: flex, а његова директна деца постају flex ставке. Кључна својства контејнера: flex-direction (ред или колона), flex-wrap (једна линија наспрам вишелинијски), justify-content (поравнање на главној оси), align-items (поравнање на попречној оси по реду) и align-content (поравнање на попречној оси više редова). Кључна својства ставке: flex-grow (колико ставка расте), flex-shrink (колико се смањује), flex-basis (почетна величина) и align-self (замењује align-items контејнера за одређену ставку). Flexbox је идеалан за навигационе траке, редове картица, централизоване распореде и сваки једнодимензионални распоред.
Како користити CSS Flexbox Генератор
-
Подесите својства контејнера (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) помоћу падајућих менија и поља за унос.
-
Кликните на било коју ставку у прегледу да бисте је изабрали (постаје наранџаста).
-
Поставите flex-grow, flex-shrink, flex-basis и align-self изабране ставке у панелу ставки.
-
Кликните на '+ Додај ставку' да бисте додали ставке; кликните на 'Уклони' да бисте избрисали изабрану ставку.
-
Пребацујте између картица CSS и HTML да видите генерисани код, а затим кликните Копирај.
-
Кликните на 'Ресетуј све' да бисте почели испочетка са подразумеваним распоредом од 3 ставке.