Preskoči na sadržaj
TextArray1.87.0
100% lokalno

CSS flexbox generator

Vizualno postavi flex kontejner i njegove stavke, pa zatim kopiraj CSS, Tailwind klase ili inline stil.

Rezultat
Slični alati
Generator CSS gridaAlati za programere
CSS clamp() generatorAlati za programere
CSS pretvarač jedinicaAlati za programere
i18n tipka difAlati za programere
Konverter iz TOML u JSONAlati za programere
SQL u JSONAlati za programere
CSS flexbox generator
Postavi flex-direction, flex-wrap, justify-content, align-items i align-content preko padajućih izbornika, dodaj razmak u bilo kojoj jedinici, i ovaj alat napiše pravilo za flex kontejner — zajedno s odgovarajućim pravilom za njegove stavke i malim tekstualnim pregledom koji pokazuje kako se kutije poredavaju. Koristi ga za skiciranje navigacijske trake, reda kartica, alatne trake obrasca ili bilo kojeg rasporeda koji trebam distribuirati, centrirati ili umotati bez posezanja za punom mrežom.
Kontrole stavki primjenjuju flex-grow, flex-shrink i flex-basis jednoliko na broj stavki koje odabereš, što je upravo kako funkcioniraju većina provjera flex redaka: jedna klasa stavke koja upravlja nekoliko kutija umjesto jednokratnih vrijednosti po kutiji. Align-content se pojavljuje u izlazu samo kada je flex-wrap postavljen na wrap ili wrap-reverse, jer ga preglednici u suprotnom ignoriraju — alat nikad ne ispisuje deklaraciju koja ništa ne čini.
Odaberi format izlaza koji odgovara tome kako gradiš: obični CSS za stilsku tablicu, Tailwind utility klase (zagrade s proizvoljnom vrijednosti pokrivaju razmake i baze koje ne sjede na standardnoj skali razmjerenja), ili atribut inline stila za brz prototip ili email-sigurnu oznaku. Svaka vrijednost se ažurira čim promijeniš opciju, a pregled rasporeda se precrta s njom — bez koraka gradnje, bez vanjske CSS-a koja se trebam učitati.
Sve se izvršava lokalno u tvom pregledniku; ništa što tu postaviš nije poslano nigdje. Kada CSS izgleda kako treba, kopiraj ga, preuzmi kao .txt datoteku ili pošalji natrag u unos da nastaviš s drugim alatom.
FAQ
Se li postavka flex-grow/shrink/basis primjenjuje na jednu stavku ili na sve njih?
Primjenjuje se na sve generirane stavke jednoliko — alat modelira čest slučaj jedne dijeljene klase stavke, a ne jednokratnih vrijednosti po stavki.
Zašto align-content nestaje kada premijenim na no wrap?
align-content ima učinak samo kada se kontejner umota na više redaka. Alat ga ispušta iz izlaza s jednim redom tako da nikad ne kopiraš pravilo koje ništa ne čini.
Što predstavlja tekstualni pregled ispod CSS-a?
Pojednostavljeni, shematski skici redoslijeda stavki i umotavanja — koristan za brzu provjeru razuma, nije piksel-točan prikaz razmjerenja ili dimenzioniranja.
Mogu li koristiti jedinicu drukčiju od piksela za razmak ili flex-basis?
Da. Upiši bilo koju valjanu CSS duljinu ili postotak — px, rem, em, % i tako dalje se prihvaćaju onakvi kako su upisani.
Je li moj raspored rasporeda bio negdje pohranjen?
Ne. Generator se izvršava potpuno u tvom pregledniku — ništa što tu postaviš nije poslano na poslužitelj.