CSS-flexbox-generator
Bygg en flex-container och dess objekt visuellt, kopiera sedan CSS, Tailwind-klasser eller inline-stil.
CSS-flexbox-generator
Ställ in flex-direction, flex-wrap, justify-content, align-items och align-content med rullgardinsmenyer, lägg till ett glapp i vilken enhet som helst, och detta verktyg skriver flex-container-regeln för dig — tillsammans med en motsvarande regel för dess objekt och en liten textförhandsvisning som visar hur lådorna är ordnade. Använd det för att skissa en navigationsfält, en kortrad, ett verktygsfält eller någon layout som behöver objekt distribuerade, centrerade eller omslutna utan att behöva ett fullständigt rutnät.
Objektinställningarna tillämpar flex-grow, flex-shrink och flex-basis enhetligt över antalet objekt du väljer — precis som riktiga flex-rader fungerar: en objektklass som styr flera lådor snarare än individuella värden per låda. Align-content visas bara i utdata när flex-wrap är inställd på wrap eller wrap-reverse, eftersom webbläsare ignorerar det annars — verktyget skriver aldrig ut en deklaration som inte gör något.
Välj utdataformat som motsvarar hur du bygger: vanlig CSS för en formatmall, Tailwind-verktygsklass (parenteser för godtyckliga värden täcker glapp och baser som inte finns på standardabståndskallan), eller ett inline style-attribut för en snabb prototyp eller e-postsäker markup. Varje värde uppdateras så fort du ändrar ett alternativ, och layoutförhandsvisningen ritas om med det — ingen byggsteg, ingen extern CSS att ladda.
Allt körs lokalt i din webbläsare; ingenting du konfigurerar här skickas någonstans. När CSS ser rätt ut, kopiera det, ladda ner det som en .txt-fil, eller skicka det tillbaka till inmatningen för att fortsätta iterera med ett annat verktyg.