CSS flexbox generátor
Vizuálisan szerkeszd a flex konténert és elemeit, majd másold a CSS-t, Tailwind osztályokat vagy beágyazott stílust.
CSS flexbox generátor
Adja meg a flex-direction, flex-wrap, justify-content, align-items és align-content értékeket legördülő menükből, adjon meg távolságot bármilyen egységben, és az eszköz megírja a flex konténer szabályt — valamint egy megfelelő szabályt az elemeinek és egy kis szöveges előnézetet, amely megmutatja, hogyan illeszkednek a dobozok. Használd sávnegisztráláshoz, kártyasorokhoz, űrlapeszköztárakhoz vagy bármilyen elrendezéshez, amely elemek elosztása, középre helyezése vagy tördelése nélkül szükséges teljes rács nélkül.
Az elemstevéző flex-grow, flex-shrink és flex-basis egyenletes alkalmazást az elemek száma szerint végzi, amely pontosan olyan, ahogy a legtöbb valódi flex sor működik: egy elemklasz több dobozra vonatkozik, nem egyedi értékek dobozanként. Az align-content csak akkor jelenik meg a kimenetben, amikor a flex-wrap értéke wrap vagy wrap-reverse, mivel a böngészők egyébként figyelmen kívül hagyják — az eszköz soha nem nyomtat olyan deklarációt, amely nem működik.
Válaszd ki azt a kimeneti formátumot, amely megfelel annak, ahogy építesz: normál CSS egy stíluslaphoz, Tailwind segédprogramok (önkényes érték zárójelek lefedik azokat a hézagokat és alapokat, amelyek nem a alapértelmezett térköz skálán vannak), vagy egy beágyazott stílus attribútum egy gyors prototípushoz vagy e-mailre biztonságos jelöléshez. Minden érték azonnal frissül, amikor megváltoztatod az opciót, és az elrendezés előnézete vele együtt rajzolódik újra — nincs fordítási lépés, nincs betöltendő külső CSS.
Minden helyi, a böngészőben fut; a beállított semmit sem küldik sehová. Amikor a CSS jól néz ki, másold, töltsd le szövegfájlként, vagy küld vissza a bemenetbe, hogy egy másik eszközzel folytasd az iterálást.