CSS Flexbox išdėstymo principai
CSS Flexbox (angl. Flexible Box Layout) yra vienmatis išdėstymo modelis, skirtas elementams išdėstyti eilutėmis arba stulpeliais. Šis modelis leidžia efektyviai paskirstyti laisvą erdvę konteineryje ir lygiauti elementus, net kai jų dydis yra nežinomas arba kinta dinamiškai. Naudojant Flexbox, galima lengvai kurti prisitaikančius dizainus (angl. responsive design), kurie sklandžiai prisitaiko prie skirtingų ekrano dydžių.
Vizualus Flexbox generatorius leidžia interaktyviai valdyti flex konteinerio ir jo elementų savybes, stebėti pokyčius gyvame vaizde ir iškart gauti paruoštą CSS kodą. Tai padeda geriau suprasti, kaip skirtingos savybės veikia tarpusavyje ir kaip keičiasi elementų elgsena keičiant konteinerio parametrus.
Konteinerio savybės ir ašių sąveika
Flexbox išdėstymas remiasi dviem ašimis: pagrindine (angl. main axis) ir skersine (angl. cross axis). Šių ašių kryptis priklauso nuo nustatytos konteinerio krypties. Generatoriaus skiltyje „Konteineris“ galima valdyti šiuos parametrus:
- Kryptis: Nustato pagrindinę ašį. Galimi pasirinkimai yra „Eilutė (row)“, „Atvirkštinė eilutė (row-reverse)“, „Stulpelis (column)“ ir „Atvirkštinis stulpelis (column-reverse)“. Perjungus kryptį iš eilutės į stulpelį, pagrindinė ir skersinė ašys susikeičia vietomis, o tai tiesiogiai pakeičia „Lygiuoti turinį išilgai (justify-content)“ ir „Lygiuoti elementus (align-items)“ veikimą.
- Perkėlimas (wrap): Nustato, ar elementai turi būti spaudžiami į vieną eilutę, ar gali persikelti. Pasirinkus „Be perkėlimo“, visi elementai priverstinai talpinami vienoje linijoje. Pasirinkus „Perkelti“ arba „Atvirkštinis perkėlimas“, netelpantys elementai perkeliami į naują eilutę.
- Lygiuoti turinį išilgai (justify-content): Paskirsto laisvą vietą išilgai pagrindinės ašies. Galimos reikšmės: „Start“, „End“, „Center“, „Space between“, „Space around“ ir „Space evenly“.
- Lygiuoti elementus (align-items): Lygiauoja elementus skersinėje ašyje vienos eilutės viduje. Galimos reikšmės: „Start“, „End“, „Center“, „Stretch“ ir „Baseline“.
- Lygiuoti turinį (align-content): Ši savybė veikia tik tada, kai įjungtas perkėlimas ir konteineryje susidaro kelios eilutės. Ji paskirsto erdvę tarp eilučių kaip grupę skersinėje ašyje. Galimos reikšmės: „Start“, „End“, „Center“, „Stretch“, „Space between“, „Space around“ ir „Space evenly“.
- Tarpas (gap): Nustato skaitinę reikšmę, apibrėžiančią atstumą tiesiogiai tarp elementų ir tarp susidariusių eilučių, nenaudojant išorinių paraščių (angl. margins).
Elementų savybių valdymas
Kiekvienas flex konteinerio vaizinis elementas gali būti konfigūruojamas individualiai. Generatoriaus skiltyje „Elementai“ galima keisti šiuos konkretaus elemento parametrus:
- Tvarka (order): Skaitinė reikšmė, kuri pakeičia elemento vizualią vietą išdėstyme, nekeičiant HTML kodo struktūros.
- Plėtimasis (grow): Skaitinė reikšmė, nurodanti, kiek elementas gali padidėti ir užpildyti laisvą konteinerio erdvę, palyginti su kitais elementais.
- Susitraukimas (shrink): Skaitinė reikšmė, nurodanti, kiek elementas gali susitraukti, kai konteineryje trūksta vietos.
- Pagrindas (basis): Pradinis elemento dydis prieš paskirstant laisvą vietą. Gali būti nurodoma skaitinė reikšmė arba „Automatinis pagrindas (auto)“.
- Lygiuoti save (align-self): Leidžia perrašyti bendrą konteinerio „align-items“ taisyklę konkrečiam elementui. Galimos reikšmės: „Auto“, „Start“, „End“, „Center“, „Stretch“ ir „Baseline“.
Svarbi taisyklė: sugeneruotame CSS kode atskiros taisyklės bus sukurtos tik tiems elementams, kurių pradinės savybės buvo pakeistos generatoriuje.
Dažni išdėstymo šablonai
Naudojant Flexbox, galima greitai sukurti standartines svetainių struktūras. Generatorius siūlo išankstinius nustatymus šiems dažniems maketams:
- Centruoti: Elemento centravimas tiek horizontaliai, tiek vertikaliai konteinerio viduryje.
- Navigacijos juosta: Elementų išdėstymas horizontalioje eilutėje su tolygiais tarpais arba elementų grupavimu kraštuose.
- Kūgis (stack): Vertikalus elementų išdėstymas vienas po kito, dažnai naudojamas formose arba mobiliuosiuose meniu.
- Kortelės: Tinklelio tipo elementų išdėstymas su perkėlimu, kur kortelės prisitaiko prie ekrano pločio.
- Šoninė juosta: Dviejų stulpelių išdėstymas, kur vienas stulpelis turi fiksuotą arba siauresnį plotį, o kitas užpildo likusią erdvę.
Duomenų apdorojimas ir privatumas
Naudojantis šiuo įrankiu, visas išdėstymo kūrimo ir generavimo procesas vyksta tiesiogiai jūsų naršyklėje. Jokie jūsų nustatymai nėra siunčiami į „BroBroGo“ serverius, todėl jūsų kuriami struktūriniai sprendimai išlieka visiškai lokalūs.
Dažniausiai užduodami klausimai
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ų.
Kaip pridėti naują elementą į peržiūros langą?
Spustelėjus mygtuką „Pridėti elementą“, vizualiame lange atsiranda naujas elementas (pavyzdžiui, „Item 5“), kurį iškart galima konfigūruoti ir stebėti jo elgseną bendrame išdėstyme.
Kaip nukopijuoti sugeneruotą CSS kodą?
Spustelėjus mygtuką „Kopijuoti CSS“, sugeneruotas kodas nukopijuojamas į jūsų iškarpinę, o mygtuko būsena pasikeičia į „Copied“.