Ipinapakita ng artikulong ito kung paano patayong i-align ang text sa loob ng isang flexbox:
Paraan 1: Gamit ang 'align-item' Property
Upang patayong ihanay ang teksto, maaaring gamitin ng mga user ang ' align-item ” property na ibinigay ng CSS. Tinutulungan nito ang mga elemento na itakda ang kanilang pagkakahanay sa loob ng flexbox. Ang mga posibleng vertical alignment na posisyon ay maaaring nasa “ itaas ”, gitna ”, o “ ibaba ” gilid.
Ang mga praktikal na demonstrasyon para sa paghahanay ng mga elemento sa mga direksyong ito ay nakasaad sa ibaba:
Halimbawa 1: Nangungunang Posisyon
Upang ihanay ang teksto sa loob ng flexbox sa tuktok na posisyon, ang ' flex-start 'Ang halaga ay ibinibigay sa ' align-item ” ari-arian. Ang property na ito ay itinalaga sa pangunahing div na ipapakita bilang flex. Ipagpalagay natin, ang div na may klase ng ' patayo ” ay nilikha sa HTML file. Pagkatapos sa CSS file, piliin ang klase na iyon at italaga ang mga sumusunod na katangian:
.patayo {
kulay : puti ;
taas : 150px ;
display : baluktot ;
padding-kaliwa : 20px ;
align-item : flex-start ;
kulay ng background : forestgreen ;
}
- Una, ang pangunahing styling at alignment ay ibinibigay sa div gamit ang color, background-color, at height properties ng CSS.
- Ang property na 'display' ay nakatakda din sa 'flex' para gawin itong isang flexbox.
- Panghuli, para ipakita ang text sa simula ng flexbox, itakda ang property na 'align-item' sa 'flex-start.
Pagkatapos isagawa ang code sa itaas, ganito ang hitsura ng webpage:
Ang output ay nagpapakita na ang teksto ay nakahanay na ngayon sa tuktok na posisyon sa loob ng flexbox.
Halimbawa 2: Gitnang Posisyon
Upang patayong ihanay ang teksto sa gitnang posisyon, itakda ang “ gitna 'halaga sa CSS ' align-item ” ari-arian:
.patayo {kulay : puti ;
taas : 150px ;
display : baluktot ;
padding-kaliwa : 20px ;
align-item : gitna ;
kulay ng background : forestgreen ;
}
Pagkatapos ng pagpapatupad ng code sa itaas:
Ang output sa itaas ay nagpapakita na ang teksto ay nakahanay na ngayon sa gitna ng flexbox.
Halimbawa 3: Ibaba na Posisyon
Upang itakda ang teksto sa ibaba ng flexbox, italaga ang ' flex-end 'halaga sa' align-item ” ari-arian. Sa pagkakataong ito ang teksto ay nakahanay sa posisyon kung saan ang flexbox ay nagtatapos ay nangangahulugan sa ibabang bahagi:
.patayo {kulay : puti ;
taas : 150px ;
display : baluktot ;
padding-kaliwa : 20px ;
align-item : flex-end ;
kulay ng background : forestgreen ;
}
Pagkatapos isagawa ang code sa itaas, ganito ang hitsura ng webpage:
Ipinapakita ng output sa itaas na ang teksto ay nakahanay na ngayon sa ibabang posisyon.
Paraan 2: Paggamit ng 'justify-content' Property
Ang ' justify-content ” Ang ari-arian ay maaari ding gamitin upang patayong ihanay ang teksto sa loob ng flexbox. Gayunpaman, ito ay gumagana katulad ng ' text-align ” property at ini-align nito ang mga elemento sa direksyon ng row. Kaya, upang baguhin ang direksyon ng pagkakahanay, ang ' pagbaluktot-direksyon 'Ang ari-arian ay ginagamit upang itakda ang ' justify-content 'paghahanay patungo sa' hanay ” direksyon:
.patayo {taas : 150px ;
display : baluktot ;
padding-kaliwa : 20px ;
kulay : puti ;
kulay ng background : darkcyan ;
pagbaluktot-direksyon : hanay ;
justify-content : flex-end ;
}
Ang paliwanag ng code sa itaas ay ibinigay sa ibaba:
- Ang ' taas ”, “ kulay 'at' padding-kaliwa ” gumagana ang mga katangian tulad ng pamamaraan sa itaas.
- Pagkatapos nito, itakda ang ' hanay 'halaga sa' pagbaluktot-direksyon ” ng flexbox upang maglapat ng mga istilo sa pamamagitan ng mga column.
- Pagkatapos nito, ang ' justify-content Ang property ng ” ay ini-align ang teksto nang patayo.
- Sa huli, ang ' flex-end 'Ang halaga ay nakahanay sa elemento sa ' ibaba ” gilid.
Tandaan : Maaari ring itakda ng mga user ang “ flex-start 'at' gitna 'mga halaga sa ' itaas ”, at “ gitna ” panig, ayon sa pagkakabanggit.
Halimbawa, pagkatapos isagawa ang code sa itaas ang webpage ay ganito ang hitsura:
Ang output sa itaas ay nagpapakita na ang teksto ay nakahanay sa ibaba ng flexbox.
Konklusyon
Upang patayong ihanay ang teksto sa loob ng isang flexbox, ang ' align-item 'at' justify-content ” Maaaring gamitin ang mga katangian ng CSS. Ang parehong mga pag-aari na ito ay nakakakuha ng ' flex-start ”, “ gitna 'o' flex-end 'mga halaga upang ihanay ang teksto sa ' itaas ”, “ gitna 'at' ibaba ” direksyon sa loob ng flexbox, ayon sa pagkakabanggit. Ipinakita ng artikulong ito ang patayong pagkakahanay ng teksto sa isang flexbox.