Flexbox generatorius

Konfigūruokite flex konteinerį ir jo elementus vizualiais valdikliais, stebėkite išdėstymą gyvai ir nukopijuokite CSS vienu spustelėjimu.

Išankstiniai nustatymai
Konteineris
Kryptis
Perkėlimas (wrap)
Lygiuoti turinį išilgai (justify-content)
Lygiuoti elementus (align-items)
Elementai
Elementas 1
Lygiuoti save (align-self)
CSS
Reguliuokite konteinerį ir elementus, kad suformuotumėte išdėstymą.

Jūsų išdėstymas kuriamas tiesiog jūsų naršyklėje. Jokie jūsų nustatymai nėra siunčiami į „BroBroGo“.

DUK

Kuo skiriasi justify-content ir align-items?

„justify-content“ išdėsto elementus išilgai pagrindinės ašies (kuria teka eilutė arba stulpelis), o „align-items“ pozicionuoja juos skersai kitos ašies. Pakeitus kryptį iš eilutės („row“) į stulpelį („column“), šios dvi ašys susikeičia vietomis, todėl „justify-content“ pradeda veikti iš viršaus į apačią, o „align-items“ – iš kairės į dešinę.

Kaip veikia atskirų elementų valdikliai?

Pasirinkite elementą pagal jo numerį, tada nustatykite, kiek jis plečiasi užpildydamas laisvą vietą (grow), kiek susitraukia trūkstant vietos (shrink), jo pradinį dydį (basis) ir jo paties lygiavimą skersinėje ašyje. Tvarka (order) perkelia elementą pirmyn arba atgal ekrane, neliečiant HTML kodo. Tik tie elementai, kuriuos pakeičiate, gauna savo taisykles sugeneruotame CSS.

Kada svarbūs wrap ir align-content?

Išjungus perkėlimą (wrap), visi elementai yra spaudžiami į vieną eilutę ir gali būti susiaurinti. Jį įjungus, netelpantys elementai perkeliami į kitą eilutę – tuomet įsijungia „align-content“, paskirstantis eilutes kaip grupę. „Gap“ nustato atstumą tarp elementų ir tarp eilučių nenaudojant išorinių paraščių.

CSS Cubic Bezier generatoriusVilkite dvi rankenėles, kad suformuotumėte animacijos kreivę, stebėkite judantį tašką ir nukopijuokite cubic-bezier() reikšmę.Kampų apvalinimo (border-radius) generatoriusApvalinkite kiekvieną kampą šliaužikliais, kurkite organines formas elipsiniu režimu ir akimirksniu nukopijuokite CSS.Elementų šešėlių (box-shadow) generatoriusVilkite šliaužiklius, kad suformuotumėte šešėlį, sluoksniuokite juos gyliui išgauti ir akimirksniu nukopijuokite paruoštą CSS.Gradientų generatoriusKurkite tiesinius, radialinius ar kūginius gradientus, pridėkite spalvų taškus, nustatykite kryptį ir nukopijuokite CSS vienu spustelėjimu.CSS Grid generatoriusNustatykite stulpelius ir eilutes, vilkite per langelius elementams išdėstyti ir vienu spustelėjimu nukopijuokite tinklelio CSS bei atitinkamą HTML.CSS clamp() skaičiuoklėĮveskite dydį mažiems ir dideliems ekranams ir gaukite kintančią clamp() reikšmę, kuri sklandžiai prisitaiko – šriftams, paraštėms ar tarpams.Spalvų konverterisKonvertuokite spalvas tarp HEX, RGB, HSL, HSV, CMYK ir LAB – redaguokite bet kurį lauką, o kiti atsinaujins automatiškai.