Paano I-align ang Teksto nang Patayo sa loob ng isang Flexbox?

Paano I Align Ang Teksto Nang Patayo Sa Loob Ng Isang Flexbox



Ang pagkakahanay ay gumaganap ng pinakamahalagang papel sa paggawa ng website na mas madaling gamitin at tumutugon. Maaaring makamit ang patayong pag-align ng text sa loob ng isang flexbox gamit ang 'align-item' at/o 'justify-content' na mga katangian. Kapag nagtatrabaho sa isang flex container, tinutukoy ng 'align-item' kung paano naka-align ang mga flex na item nang patayo sa loob ng container.

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.