CSS flexbox generator
Vizualno nastavi flex vsebnik in njegove elemente, nato kopiraj CSS, Tailwind razrede ali inline slog.
CSS flexbox generator
Nastavi flex-direction, flex-wrap, justify-content, align-items in align-content s spustnimi meniji, dodaj razmak v poljubni enoti in to orodje napiše pravilo flex vsebnika zate — skupaj z ujemajočim pravilom za njegove elemente in majhnim tekstualnim ogledom, ki prikazuje, kako se škatle poredajo. Uporabi ga za skiciranje navigacijske vrstice, vrste kartic, orodno vrstice obrazca ali katerekoli razporeditve, ki jo je potrebno distribuirati, centrirati ali zaviti brez poseganja po polni mreži.
Nadzori elementov uporabljajo flex-grow, flex-shrink in flex-basis enako za izbrano število elementov, kar je ravno takšen primer pravi flex reda: en razred elementa, ki upravlja več škatel namesto ločenih vrednosti na element. Align-content se pojavi v izhodu samo, kadar je flex-wrap postavljen na wrap ali wrap-reverse, ker ga brskalniki drugače prezrejo — orodje nikoli ne izpiše izjave, ki nič ne naredi.
Izberi obliko izhoda, ki se ujema s tem, kako gradiš: navaden CSS za slogovno tabelo, Tailwind utility razrede (oglatim za poljubne vrednosti pokrivajo razmake in baze, ki ne sedejo na privzeti lestvici razmikov), ali atribut inline sloga za hiter prototip ali email-varno oznako. Vsaka vrednost se posodobi takoj, ko spremenišš možnost in ogled razporeditve se s tem ponovno nariše — brez koraka izgradnje, brez zunanjega CSS-a za nalaganje.
Vse se izvršava lokalno v tvojem brskalniku; nič, kar tu nastaviš, ni poslano nikamor. Ko CSS izgleda pravilno, ga kopiraj, prenesi kot datoteko .txt ali ga pošlji nazaj v vnos za nadaljnje delo z drugim orodjem.