Mga Katangian ng CSS na Kaugnay sa Layout ng Hanay
Ipinaliwanag ng artikulong ito ang mga katangian ng CSS na may kaugnayan sa layout ng hanay.
Matutunan mo kung paano ilarawan ang mga layout ng hanay.
YouTube Video
HTML para sa Preview
css-columns.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-columns.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Columns</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>columns</h3>
23 <section style="width: 100%; height: 350px;">
24 <h4>Columns Example</h4>
25 <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26 <section class="sample-view">
27 <section class="columns-container">
28 <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31 <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32 <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33 <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34 </section>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>order</h3>
40 <section style="height: 300px;">
41 <header><h4>column-width: 250px</h4></header>
42 <section class="sample-view">
43 <div class="container">
44 <div class="item item-1">Item 1</div>
45 <div class="item item-2">Item 2</div>
46 <div class="item item-3">Item 3</div>
47 </div>
48 </section>
49 </section>
50 </article>
51 </main>
52</body>
53</html>Layout ng Hanay
mga hanay
1.columns-container {
2 columns: 100px 3;
3 column-gap: 20px;
4 column-rule: 2px solid #333;
5}
6
7h5 {
8 column-span: all;
9}Ang katangiang CSS na columns ay nagbibigay ng madaling paraan upang ipakita ang nilalaman na nahahati sa maraming hanay. Sa isang deklarasyon, madali mong maisasaayos ang lapad ng hanay at bilang ng mga hanay, kaya angkop ito para sa mga disenyo na tumutugma sa iba't ibang laki ng screen. Ito ay partikular na epektibo kapag kinakailangan ang isang layout kung saan ang teksto ay ipinapakita nang mahaba at patayo, at inayos sa maraming hanay, tulad ng sa mga pahayagan o magasin.
- Sa halimbawang ito, ang nilalaman ay nahahati sa 3 hanay na may 20px na agwat at 2px na patakaran sa pagitan ng mga hanay. Bukod dito, ang elementong
h5ay sumasaklaw sa maraming hanay.
Ang columns ay maikling paraan ng pagsulat para sa mga katangiang column-width at column-count.
Sintak ng Katangiang columns
1columns: <column-width> <column-count>;Ang columns ay sumusunod sa format na ito.
<column-width>: Tinutukoy ang lapad ng bawat hanay. Maaari mong gamitin angautoo anumang unit ng haba (hal.,px,em,%, atbp.) bilang halaga.<column-count>: Tinutukoy ang bilang ng mga hanay. Ipinapahayag bilang isang numerikong halaga.
Katangiang column-width
1.container {
2 column-width: 250px;
3}Ang column-width ay isang katangian na tumutukoy sa pinakamaliit na lapad ng bawat hanay. Kapag ginamit kasabay ng column-count, nagiging posible ang awtomatikong pag-aayos at paglalagay ng mga hanay. Isinasaalang-alang ng browser ang lapad ng lalagyan at awtomatikong kinakalkula ang kinakailangang bilang ng mga hanay.
- Sa halimbawang ito, ang lapad ng bawat hanay ay 250px, at ang pinakamainam na bilang ng mga hanay ay kinakalkula batay sa lapad ng lalagyan.
column-count na Ari-arian
1.container {
2 column-count: 3;
3}Ang column-count ay isang ari-arian na tahasang nagtatakda kung ilang mga kolum ang hinahati ng tinukoy na elemento. Hindi tulad ng column-width, inaayos nito ang bilang ng mga kolum.
- Sa halimbawa na ito, ang nilalaman sa loob ng lalagyan ay nahahati sa tatlong mga kolum.
column-gap na Ari-arian
1.container {
2 column-gap: 20px;
3}Ang column-gap ay isang ari-arian na tumutukoy sa espasyo (agwat) sa pagitan ng bawat kolum. May isang karaniwang ari-arian rin sa CSS Grid na tinatawag na gap, ngunit ang column-gap ay kapaki-pakinabang kapag gusto mo lamang i-customize ang mga margin sa pagitan ng mga kolum.
- Sa halimbawa na ito, mayroong 20px na margin sa pagitan ng bawat kolum. Ang default na halaga ay 16px.
column-rule na Ari-arian
1.container {
2 column-rule: 2px solid #333;
3}Ang column-rule ay isang ari-arian para gumuhit ng mga linya sa pagitan ng mga kolum. May syntax ito na katulad ng border na ari-arian at nagbibigay-daan sa iyo na tukuyin ang lapad, istilo, at kulay ng linya.
- Sa halimbawa na ito, isang solidong itim na linya na may lapad na 2px ang makikita sa pagitan ng mga kolum. Ang
column-ruleay maaaring hatiin sa sumusunod na tatlong ari-arian.column-rule-width: Tinutukoy ang lapad ng linya.column-rule-style: Tinutukoy ang istilo ng linya. Halimbawa, mayroongsolid,dashed,dotted, at iba pa.column-rule-color: Tinutukoy ang kulay ng linya.
column-span na Ari-arian
1h5 {
2 column-span: all;
3}Ang column-span ay isang ari-arian na nagtatakda sa isang partikular na elemento upang saklawin ang maramihang kolum. Pangunahing ginagamit ito para sa mga elemento tulad ng mga pamagat o titulo. Mayroong dalawang posibleng halaga:.
- none: Ang elemento ay hindi saklaw ang mga kolum at nagkasya lamang sa isang kolum. Ito ang default na halaga.
- all: Ang elemento ay ipinapakita na sumasaklaw sa lahat ng kolum.
- Sa halimbawa na ito, ang
h5na elemento ay ipinapakita na sumasaklaw sa maraming kolum.
column-fill na Ari-arian
1.container {
2 column-fill: balance;
3}Ang column-fill ay isang ari-arian na kumokontrol kung paano ipinamamahagi ang nilalaman sa mga hanay. Karaniwan, ang mga hanay ay pinupunan nang pantay-pantay hangga't maaari, ngunit pinapayagan ka ng ari-arian na ito na tukuyin ang ibang kaayusan. Ang mga sumusunod na halaga ay maaaring gamitin:.
- balance: Ang nilalaman ay nakaayos upang punan ang mga haligi nang pantay-pantay. Ito ang default na halaga.
- auto: Ang mga haligi ay awtomatikong mapupuno. Ang huling hanay ay maaaring maging mas mahaba.
- Inaayos ng setting na ito upang ang nilalaman ay mairetiribuyut nang pantay.
Paggamit Kasama ang Media Queries
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}Ang ari-arian na columns ay maaaring pagsamahin sa media queries upang suportahan ang responsive na disenyo. Maaari mong madaling baguhin ang bilang ng mga haligi at ang lapad ng mga haligi depende sa iba't ibang laki ng screen.
- Sa halimbawang ito, kapag ang lapad ng screen ay 600px o mas maliit pa, magkakaroon ng 1 hanay. Para sa mas malalawak na screen, ito ay mahahati sa 3 haligi na may lapad na 200px bawat isa.
Buod
Ang ari-arian na CSS columns ay isang makapangyarihang tool upang madaling makapagpatupad ng mga layout gamit ang maraming hanay. Ito ay partikular na kapaki-pakinabang para sa responsive na disenyo at mga layout ng teksto na inuuna ang mabuting pagbasa. Sa pamamagitan ng pagsasama ng mga magkakaugnay na ari-arian, maaari mong madaling baguhin ang bilang at lapad ng mga hanay, agwat, dekorasyon, at iba pa.
Pinapadali nito ang pagsasakatuparan ng mas sopistikadong disenyo, kaya't samantalahin ito.
ayusin
1.container {
2 all:initial;
3 display: flex;
4}
5.item {
6 padding: 10px;
7 background-color: lightblue;
8 margin: 5px;
9}
10.item-1 {
11 order: 3;
12}
13.item-2 {
14 order: 1;
15}
16.item-3 {
17 order: 2;
18}Ang ari-arian na CSS order ay ginagamit upang kontrolin ang pagkakasunod ng pagpapakita ng mga elemento kapag gumagamit ng Flexbox o Grid layouts. Karaniwan, ang mga elemento ay ipinapakita ayon sa HTML markup, ngunit maaari mong baguhin ang kanilang visual na kaayusan sa pamamagitan ng paggamit ng ari-arian na order. Ang ari-arian na ito ay nakakatulong sa pagdidisenyo ng flexible na mga user interface at sa paggawa ng responsive na disenyo.
- Sa halimbawang ito, ang mga item ay minarkahan sa HTML bilang
Item 1,Item 2,Item 3, ngunit ang pagkakasunod ng pagpapakita ay nagbabago saItem 2,Item 3,Item 1dahil sa ari-arian na CSSorder.
Mga Batayan ng Ari-arian na order
Ang ari-arian na order ay ginagamit sa mga item sa loob ng mga Flexbox o Grid na lalagyan. Tinutukoy mo ang pagkakasunud-sunod ng paglalagay sa pamamagitan ng pagtatakda ng mga integer na halaga para sa bawat item. Sa default, ang order ng lahat ng item ay itinakda sa 0. Sa pamamagitan ng pagbabago ng halagang ito, maaari mong tukuyin ang pagkakasunod-sunod ng pagpapakita ng mga item.
Pangunahing Syntax
1.item {
2 order: <integer>;
3}- Maaari kang maglagay ng anumang integer para sa halaga ng
order. Maaaring gumamit ng positibo, negatibo, o zero na mga halaga. Kapag mas maliit ang halaga, mas maagang ipapakita ang elemento, at kapag mas malaki ang halaga, mas huling ipapakita ito.
Paggamit ng Positibo at Negatibong Halaga
Maaari ka ring magtalaga ng negatibong mga halaga para sa property na order. Ang mga elementong may negatibong halaga ay ipinapakita bago ang default na pagkakasunod-sunod.
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}Sa halimbawang ito, ang Item 1 ay itinakda sa order: -1, kaya iyon ang unang lumilitaw. Sa kabaligtaran, ang Item 3 ay itinakda sa order: 1, at ang Item 2 ay itinakda sa order: 2, kaya lumilitaw ang mga ito sa ganitong pagkakasunod-sunod.
order sa Responsive na Disenyo
Sa responsive na disenyo, posible na baguhin ang pagkakasunud-sunod ng mga elemento batay sa laki ng screen. Halimbawa, sa mobile view, maaari mong baguhin ang pagkakasunod-sunod ng mga elemento upang ipakita muna ang mahalagang impormasyon.
1.item-1 {
2 order: 1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 3;
9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13 .item-1 {
14 order: 3;
15 }
16 .item-2 {
17 order: 1;
18 }
19 .item-3 {
20 order: 2;
21 }
22}Sa halimbawang ito, sa normal na view, ang mga item ay ipinapakita sa pagkakasunod-sunod na Item 1, Item 2, Item 3, ngunit kapag ang lapad ng screen ay mas mababa sa 600px, unang lilitaw ang Item 2, kasunod ang Item 3, at huli ang Item 1.
Mga Pagsasaalang-alang para sa order
Ang paggamit ng property na order ay maaaring magresulta sa isang visual na pagkakasunud-sunod na naiiba sa pagkakasunud-sunod sa DOM tree. Maaaring maapektuhan nito ang mga tool sa accessibility, tulad ng mga screen reader. Kapag nagbago ang pagkakasunud-sunod, maaaring hindi gumana ng tama ang keyboard navigation at iba pang mga teknolohiya na tumutulong. Samakatuwid, kinakailangang maingat na isipin ang epekto nito sa karanasan ng user kapag gumagamit ng order.
Konklusyon
Ang CSS na property na order ay isang makapangyarihang tool na nagbibigay-daan sa iyo na madaling kontrolin ang pagkakasunud-sunod ng pagpapakita ng mga elemento sa Flexbox o Grid layouts. Sa pamamagitan ng paggamit ng positibo o negatibong mga halaga, maaari mong flexible na baguhin ang pagkakasunod-sunod ng mga elemento, na partikular na kapaki-pakinabang sa responsive na disenyo. Gayunpaman, kailangang bigyang-pansin ang accessibility at ang pagkakaiba sa pagitan ng visual na pagkakasunod-sunod at HTML na istruktura. Kung ang mga ito ay maayos na isinasaalang-alang, ang property na order ay maaaring maging kapaki-pakinabang para sa paglikha ng mas dynamic at flexible na mga layout.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.