"Flexbox" pamoka: individualaus kubo išlyginimo projektavimas

Šioje pamokoje sužinosite, kaip naudoti "Flexbox" CSS ir HTML, kad galėtumėte projektuoti vienkartinį elementų išlyginimą. Naudodamiesi nedidele užduotimi, kurioje sukursime puslapį su skaičiumi 3, pritaikysime įvairias Flexbox savybes. Daugiausia dėmesio skirsime elementų ištempimui ir viengubam išlyginimui konteineryje. Šis pratimas padės pagilinti "Flexbox" naudojimo žinias ir suprasti, kaip efektyviai projektuoti žiniatinklio projektų išdėstymą.

Pagrindinės žinios

• Flexbox leidžia lengvai išdėstyti elementus konteineryje.
• Savybės align-items ir align-self padeda valdyti flexbox elementų išlyginimą.
• Flexbox galima naudoti dviem kryptimis: kaip stulpelį (column) arba kaip eilutę (row).
• Dirbant su "Flexbox" svarbu teisingai nustatyti konteinerio ir "flex" elementų matmenis, kad būtų pasiektas švarus išdėstymas.

Žingsnis po žingsnio

Norėdami suprojektuoti puslapį su kubu, kuriame pavaizduotas skaičius 3, atlikite šiuos veiksmus:

1 žingsnis: sukurkite HTML struktūrą

Pirmiausia apibrėžkite pagrindinę kubo puslapio HTML struktūrą. Sukurkite konteinerį, kuriame būtų trys apskritimai (taškai). Būtinai susiekite konteinerį su CSS stilių sąrašu, kad vėliau galėtumėte taikyti flexbox savybes.

2 veiksmas: suaktyvinkite flexbox

Nustatykite konteinerio savybę display: flex;. Taip konteineris taps flex konteineriu. Taip pat galite naudoti flex-direction: column;, kad taškus išdėstytumėte vieną po kitu.

3 veiksmas: taškų išlyginimas

Dabar svarbu išlyginti atskirus taškus. Pirmajam taškui galite naudoti savybę align-self: flex-start;. Taip pirmasis taškas bus padėtas konteinerio viršuje. Kadangi tai jau yra numatytasis nustatymas, jis nesukels jokių vizualinių pokyčių.

4 veiksmas: centruokite antrąjį tašką

Antrajam taškui pritaikykite savybę align-self: centre;. Dėl to taškas bus perkeltas į konteinerio centrą. Norint optimizuoti padėtį, gali tekti eksperimentuoti su užpildymu ir dydžiu.

5 veiksmas: trečiojo taško padėtis

Trečiajam taškui naudokite align-self: flex-end;, kad jis būtų perkeltas į konteinerio apačią. Tai turėtų vizualiai parodyti, kad taškai sudaro skaičių 3.

6 veiksmas: Sureguliuokite lankstumo kryptį

Taip pat turite galimybę pakeisti lankstumo kryptį į eilutę;. Taip taškai bus rodomi vienas šalia kito. Jei tai padarysite, įsitikinkite, kad taškai vis dar yra tinkama tvarka, kad atvaizduotų skaičių 3.

7 veiksmas: sureguliuokite langelių dydžius

Norėdami užtikrinti, kad taškai būtų aiškiai matomi, pakoreguokite langelių dydžius. Pavyzdžiui, nustatykite jų plotį 20 pikselių, kad išbandytumėte, kaip jie atrodys vienas šalia kito.

8 veiksmas: nustatykite teksto lygiuotę

Kad apskritimai būtų geriau matomi, galite naudoti savybę text-align: centre;. Taip tekstas bus centruojamas apskritimuose, todėl visas maketas taps vizualiai patrauklesnis.

9 veiksmas: atlikite smulkius koregavimus

Norėdami patobulinti maketą, galite eksperimentuoti su padding ir margin reikšmėmis. Gali prireikti pakoreguoti konteinerio užpildą, kad viskas atrodytų tolygiai.

10 veiksmas: galutinis patikrinimas

Patikrinkite visą maketą. Atkreipkite dėmesį į taškų išdėstymą ir jų tarpus. Įsitikinkite, kad viskas rodoma taip, kaip įsivaizdavote.

Apibendrinimas

Šiame vadove sužinojote, kaip, naudojant "Flexbox" technologiją, suprojektuoti skirtingus elementų išlyginimus konteineryje. Pasitelkę "Flexbox" išdėstėme kubo taškus taip, kad skaičius 3 būtų rodomas vizualiai patraukliai. Sužinojote, ką reiškia align-items ir align-self, taip pat sužinojote apie flex kryptis. Šios žinios padės jums efektyviau kurti žiniatinklio maketus ir atitikti įvairius reikalavimus.