Flexboxi generaator

Seadistage flex-konteiner ja selle elemendid visuaalsete juhtnuppudega, vaadake paigutuse reageerimist reaalajas ja kopeerige CSS ühe klõpsuga.

Eelseadistused
Konteiner
Suund (direction)
Reavahetus (wrap)
Sisu jaotamine (justify-content)
Elementide joondamine (align-items)
Elemendid
Element 1
Enda joondamine (align-self)
CSS
Reguleerige konteinerit ja elemente paigutuse kujundamiseks.

Teie paigutus luuakse otse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse.

KKK

Mis vahe on justify-content ja align-items omadustel?

Justify-content jaotab elemendid piki peatelge — suunda, kuhu rida või veerg kulgeb —, samas kui align-items paigutab need risti üle teise telje. Kui muudate suuna reast veeruks, vahetuvad ka teljed, mistõttu justify-content hakkab tööle ülalt alla ja align-items vasakult paremale.

Kuidas toimivad elemendipõhised seaded?

Valige element selle numbri järgi, seejärel määrake, kui palju see kasvab vaba ruumi täitmiseks (grow), kui palju kahaneb kitsas ruumis (shrink), selle algne suurus (basis) ja selle enda joondus ristteljel (align-self). Order liigutab elementi ekraanil ette- või tahapoole ilma HTML-koodi puutumata. Ainult need elemendid, mida te tegelikult muudate, saavad CSS-is oma reegli.

Millal on wrap ja align-content olulised?

Kui reavahetus (wrap) on väljas, surutakse kõik elemendid ühele reale ja neid võidakse kitsamaks pigistada. Kui lülitate selle sisse, langevad elemendid, mis enam ei mahu, järgmisele reale – siis hakkab kehtima align-content, mis jaotab ridu rühmana. Gap määrab elementide ja ridade vahelise ruumi ilma margin-omadusteta.

CSS Cubic Bezier generaatorLohistage kahte pidet üleminekukõvera kujundamiseks, vaadake punkti liikumist võrdluses ühtlase liikumisega ja kopeerige cubic-bezier() väärtus.Border Radiuse generaatorÜmardage iga nurka liuguritega, kujundage orgaanilisi mulle elliptilise režiimiga ja kopeerige CSS kohe.Box Shadow generaatorLohistage liugureid box-shadow kujundamiseks, lisage sügavuse saavutamiseks kihte ja kopeerige valmis CSS kohe.Gradiendi generaatorLooge lineaarseid, radiaalseid või koonilisi gradiente, lisage värvipunkte ja määrake suund ning kopeerige CSS ühe klõpsuga.CSS Gridi generaatorMäärake veerud ja read, lohistage üle lahtrite elementide paigutamiseks ning kopeerige griddi CSS koos sobiva HTML-iga ühe klõpsuga.CSS clamp() kalkulaatorSisestage suurus väikeste ja suurte ekraanide jaoks ning saate sujuvalt skaleeruva clamp() väärtuse fondi suuruste, paddingute, marginite või gapide jaoks.VärvikonverterTeisendage värve HEX, RGB, HSL, HSV, CMYK ja LAB vahel — muutke mistahes välja ja ülejäänud uuenevad reaalajas.