Šajā rokasgrāmatā uzzināsiet, kā izmantot Flexbox, lai izlīdzinātu elementus elastīgajā konteinerā gar galveno asi. Mēs jau esam aplūkojuši izlīdzināšanu gar šķērsasi, taču galvenā ass ir tikpat svarīga. Flexbox tehnoloģija piedāvā vairākus veidus, kā padarīt elementu izlīdzināšanu elastīgu un pielāgojamu. Aplūkosim to tuvāk!
Galvenie secinājumi
- Izlīdzināšana pa galveno asi tiek veikta, izmantojot īpašību justify-content.
- Lai pielāgotu izkārtojumu, varat izmantot dažādas vērtības, piemēram, centre, flex-start, flex-end, space-between un space-around.
- Flexbox iestatījumi tieši ietekmē elementu izkārtojumu vēlamajā virzienā.
Soli pa solim
1. Inicializējiet flex konteineru
Sāciet ar flex konteinera izveidi un tā elastīgā virziena iestatīšanu. Šajā piemērā mēs iestatām flex virzienu uz rindu. Tas nozīmē, ka elementi tiks sakārtoti rindā no kreisās puses uz labo.
2. elementu izlīdzināšana pēc noklusējuma
Ja ievietojat elementus konteinerā bez īpašiem stila pielāgojumiem, redzēsiet, ka pēc noklusējuma tie ir izlīdzināti konteinera augšpusē. Lai to vizualizētu, varat tiem piešķirt 100 pikseļu platumu.
3. centrēts izlīdzinājums
Lai centrētu elementus, izmantojiet CSS īpašību justify-content ar vērtību centre. Tas izlīdzina jūsu elementus konteinera centrā, tādējādi iegūstot ļoti pievilcīgu izkārtojumu.
4. elementu izlīdzināšana beigās
Ja vēlaties izlīdzināt elementus konteinera beigās, varat izmantot īpašības justify-content vērtību flex-end. Tas pārvieto elementus uz konteinera labo galu.
5. izlīdzināt elementus sākumā
Noklusējuma uzvedība bez pielāgošanas ir flex-start, kas nozīmē, ka elementi paliek konteinera sākumā. Šis iestatījums ir noderīgs, ja vēlaties skaidru, sakoptu elementu izkārtojumu konteinera augšdaļā.
6. mainīt flex virzienu
Ja maināt flex virzienu uz kolonnu, galvenā ass mainās no horizontālas uz vertikālu. Tas nozīmē, ka elementi tagad ir sakārtoti no augšas uz leju.
7. centrēt elementus vertikālā izkārtojumā
Elementus šajā jaunajā izlīdzinājumā var arī centrēt, izmantojot justify-content: centre. Šis iestatījums nodrošina, ka visi elementi tiek parādīti konteinera centrā.
8. izlīdzināšana apakšā
Ja vēlaties, lai elementi būtu konteinera apakšā, varat atkal iestatīt izlīdzinājumu flex-end. Tādējādi elementi tiek novietoti konteinera apakšā.
9. telpas īpašību izmantošana
Flexbox ļauj arī kontrolēt atstarpi starp elementiem, izmantojot space-between, space-around un space-evenly. Šīs īpašības dažādos veidos sadala pieejamo telpu.
10. izmantot space-between
Izmantojot justify-content: space-between, pirmais elements paliek konteinera augšpusē, bet pēdējais - apakšpusē, un telpa starp elementiem tiek sadalīta vienmērīgi.
11. izmēģiniet atstarpi apkārt
Ja izmantojat space-around, ap katru elementu tiek izveidota vienāda apjoma atstarpe. Šī telpa ir redzama konteinera centrā, bet elementi paliek vienmērīgi izvietoti.
12. izmantot space-evenly
Izmantojot space-evenly, tiek nodrošināts, ka visur starp elementiem un konteinera malu ir vienāda telpa.
Kopsavilkums
Šajā rokasgrāmatā jūs uzzinājāt, kā iestatīt izlīdzināšanu galvenajā asī, izmantojot Flexbox. Izmantojot justify-content, jūs varat būt ļoti elastīgi attiecībā uz elementu izvietojumu. Jūs arī uzzinājāt par dažādām īpašībām, kas palīdzēs jums panākt vēlamo izkārtojumu. Izmantojiet šīs zināšanas, lai radītu pievilcīgus un lietotājam draudzīgus dizainus!
