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.

Kirjutanud ja üle vaadanud BroBroGo toimetus.Viimati uuendatud:

CSS Flexboxi paigutuse põhimõtted ja teljed

CSS Flexbox on paigutuse mudel, mis võimaldab elemente konteineris tõhusalt ritta seada, joondada ja ruumi nende vahel jaotada. Erinevalt traditsioonilistest meetoditest põhineb Flexbox kahel teljel: peateljel (main axis) ja ristteljel (cross axis).

Peatelje suuna määrab omadus flex-direction. Kui suunaks on valitud rida, kulgeb peatelg horisontaalselt vasakult paremale. Kui suund muudetakse reast veeruks, vahetuvad peatelg ja risttelg. See muudatus mõjutab otseselt seda, kuidas omadused justify-content ja align-items elemente paigutavad. Peatelg määrab ära suuna, kuhu rida või veerg kulgeb, ning risttelg kulgeb sellega risti.

Konteineri omadused ja nende mõju paigutusele

Flex-konteineri käitumist saab täielikult juhtida järgmiste põhiomadustega, mis määravad ära elementide üldise paigutuse reeglid:

  • Suund (direction): Määrab elementide voolu suuna. Valikud on Rida (row), Rida vastupidi (row-reverse), Veerg (column) ja Veerg vastupidi (column-reverse).
  • Reavahetus (wrap): Määrab, kas elemendid surutakse ühele reale või lubatakse neil kanduda mitmele reale. Valikuteks on Ilma reavahetuseta (nowrap), Reavahetus (wrap) ja Reavahetus vastupidi (wrap-reverse). Kui reavahetus on väljas, surutakse kõik elemendid ühele reale, mis võib põhjustada elementide kokkupigistamist.
  • Sisu jaotamine (justify-content): Joondab elemendid piki peatelge. Valikud on Algusesse (start), Lõppu (end), Keskele (center), Ruum vahele (space-between), Ruum ümber (space-around) ja Võrdne ruum (space-evenly).
  • Elementide joondamine (align-items): Joondab elemendid ristteljel ühe rea piires. Valikud on Algusesse (start), Lõppu (end), Keskele (center), Venita (stretch) ja Alusjoon (baseline).
  • Sisu joondamine (align-content): Määrab ridade jaotuse ristteljel, kui reavahetus on sisse lülitatud ja konteineris on mitu rida elemente. Valikud on Algusesse (start), Lõppu (end), Keskele (center), Venita (stretch), Ruum vahele (space-between), Ruum ümber (space-around) ja Võrdne ruum (space-evenly).
  • Vahe (gap): Määrab numbrilise väärtusena vahemaa elementide vahel ja ridade vahel ilma väliseid veeriseid (margin) kasutamata.

Elementide individuaalne seadistamine

Lisaks konteineri üldistele reeglitele saab iga elementi eraldi häälestada. See võimaldab luua asümmeetrilisi ja dünaamilisi paigutusi. Elemendi käitumist juhivad järgmised parameetrid:

  • Järjekord (order): Numbriline väärtus, mis muudab elemendi visuaalset asukohta teiste suhtes ilma HTML-koodi järjekorda muutmata.
  • Kasvamine (grow): Numbriline väärtus, mis näitab, kui palju element kasvab vaba ruumi täitmiseks võrreldes teiste elementidega.
  • Kahanemine (shrink): Numbriline väärtus, mis määrab elemendi kahanemise määra, kui ruumi on liiga vähe.
  • Baas (basis): Elemendi algne suurus enne vaba ruumi jaotamist. See võib olla numbriline väärtus või Automaatne baas (auto).
  • Enda joondamine (align-self): Võimaldab üksikul elemendil eirata konteineri üldist align-items reeglit ja joonduda ristteljel iseseisvalt. Valikud on Automaatne (auto), Algusesse (start), Lõppu (end), Keskele (center), Venita (stretch) ja Alusjoon (baseline).

Sagedased paigutusmustrid veebidisainis

Flexbox lahendab mitmeid klassikalisi veebidisaini väljakutseid. Tööriistas saab katsetada ja luua järgmisi levinud eelseadistusi:

  • Keskele: Elementide täielik tsentreerimine nii horisontaalselt kui ka vertikaalselt, kasutades väärtusi Keskele (center) nii sisu jaotamisel kui ka elementide joondamisel.
  • Navigatsiooniriba: Elemendid jaotatakse horisontaalselt reana, kus kasutatakse väärtust Ruum vahele (space-between), et logo ja menüülingid paigutuksid ekraani eri servadesse.
  • Virn (stack): Elemendid asetatakse üksteise alla, määrates suunaks Veerg (column).
  • Kaardid: Mitmerealine paigutus, kus kasutatakse reavahetust Reavahetus (wrap) ja määratakse elementidele võrdne kasvamine, et kaardid täidaksid ekraani laiuse paindlikult.
  • Külgriba: Paigutus, kus põhiosa ja külgriba on kõrvuti, kuid nende kasvamise (grow) ja baasi (basis) suhtarvud on erinevad, tagades asümmeetrilise jaotuse.

Kuidas Flexboxi generaator töötab

Tööriist võimaldab visuaalselt seadistada flex-konteinerit ja selle elemente. Kasutaja muudab juhtnuppe, näeb muudatusi reaalajas visuaalses eelvaates ja saab seejärel genereeritud CSS-koodi oma projekti kopeerida.

Kui klõpsatakse nupule "Lisa element", ilmub uus element (näiteks "Element 5"). Klõpsates nupule "Kopeeri CSS", muutub nupu olek tekstiks "Copied". CSS-koodi genereerimisel kehtib reegel, et ainult need elemendid, mille omadusi on muudetud, saavad oma isikliku CSS-reegli. See hoiab koodi puhta ja kompaktsena.

Teie paigutus luuakse otse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse, mis tagab andmete töötlemise kohapeal.

Korduma kippuvad küsimused

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.

Kuidas mõjutab suuna muutmine elementide paigutust?
Kui muudate suuna väärtuselt Rida (row) väärtusele Veerg (column), pööratakse peatelg horisontaalsest vertikaalseks. Selle tulemusena hakkab justify-content juhtima vertikaalset joondust ja align-items horisontaalset joondust.

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.