Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan harta align-self kepada nilai lalainya dalam CSS?
CSS atau Cascading Style Sheet ialah alat berkuasa yang menyediakan satu set sifat untuk menjajarkan dan elemen kedudukan pada halaman web. Sifat align-self ialah salah satu daripada banyak sifat yang tersedia dalam CSS untuk melaraskan penjajaran item Flex individu dalam bekas Flex. Secara lalai, align-self ditetapkan kepada auto, yang bermaksud elemen itu akan mewarisi penjajaran bekas induknya. Walau bagaimanapun, tingkah laku ini boleh diubah untuk item Flex individu dengan menetapkan sifat align-self.
scc selector{ align-self: auto; }
Sebelum kita membincangkan cara untuk menetapkan semula sifat align-self kepada nilai lalainya, adalah penting untuk memahami apa itu align-self. Sifat align-self ialah subsifat bagi sifat trengkas flex ia digunakan untuk menjajarkan satu item flex sepanjang paksi mendatar bekas. Nilai lalai atribut align-self ialah auto, yang menyebabkan elemen mewarisi atribut align-item pada bekas induknya. Atribut align-self boleh ditetapkan kepada salah satu nilai berikut -
Auto (lalai),
Pelancaran Flex,
Sebelah lentur,
Pusat,
Garis asas, dan
Menganjalkan
Jika anda menetapkan atribut align-self kepada nilai selain daripada auto, ia akan mengatasi atribut align-item bagi bekas untuk elemen khusus tersebut.
Untuk menetapkan semula atribut align-self kepada nilai lalainya, cuma alih keluar nilai auto atribut daripada pengisytiharan CSS elemen. Contohnya
.element { align-self: center; }
Apabila atribut align-self dialih keluar daripada pengisytiharan, ia ditetapkan semula kepada nilai lalainya.
.element { /* align-self: center; */ }
Sekarang, kami akan meneroka beberapa contoh menetapkan semula sifat align-self kepada nilai lalainya dalam CSS.
Cara mudah untuk menetapkan semula sifat align-self kepada nilai lalainya ialah dengan menetapkannya kepada auto. Apabila nilai align-self ditetapkan kepada auto, item Flex akan dijajarkan mengikut nilai sifat item align-item yang ditetapkan pada bekas Flex.
Dalam contoh ini, kami akan menggunakan nilai auto untuk memilih semua elemen .item yang tidak mempunyai kelas .div1 atau .div3 dan menetapkan atribut align-self mereka kepada auto. Ini akan memastikan bahawa hanya .div1 dan .div3 serta elemen mempunyai nilai penjajaran diri tersuai.
<!DOCTYPE html> <html> <head> <style> body { text-align: center; } .container { display: flex; justify-content: center; align-items: center; height: 200px; background-color: lightgray; } .item { width: 100px; height: 50px; background-color: white; border: 1px solid black; margin: 10px; } .div1 { align-self: flex-start; } .div2 { align-self: auto; } .div3 { align-self: flex-end; } </style> </head> <body> <h3>Set align-self property to its default value using the align-self:auto</h3> <div class="container"> <div class="item div1">HTML</div> <div class="item div2">CSS</div> <div class="item div3">JavaScript</div> </div> </body> </html>
:not() ialah cara lain untuk menetapkan semula sifat align-self kepada nilai lalainya. Pemilih ini membenarkan pemilihan semua elemen yang tidak memenuhi kriteria tertentu. Menggunakan pemilih :not() kita boleh memilih semua elemen kecuali elemen yang kita mahu gunakan nilai align-self tertentu.
Dalam contoh ini, kami akan menggunakan pemilih :not() untuk memilih semua elemen .item yang tidak mempunyai kelas .box1 atau .box3 dan menetapkan atribut align-self mereka kepada auto. Ini akan memastikan bahawa hanya .box1 dan .box3 serta elemen mempunyai nilai align-self tersuai.
<!DOCTYPE html> <html> <head> <style> h1, h3{ text-align:center;} .container { display: flex; justify-content: center; align-items: center; height: 200px; background-color: lightgray; } .item:not(.box1):not(.box3) { align-self: auto;} .item { width: 100px; height: 50px; border: 1px solid black; margin: 10px; background-color:pink; } .box1 { align-self: flex-start; background-color:lightgreen;} .box3 { align-self: flex-end; background-color:lightblue; } </style> </head> <body> <h3>Set align-self property to its default value using the :not() selector</h3> <div class="container"> <div class="item box1">Java</div> <div class="item">Python</div> <div class="item box3">PHP</div> </div> </body> </html>
align-self ialah alat yang berkuasa untuk menetapkan penjajaran menegak item Flex dalam bekas Flex. Walau bagaimanapun, kadangkala kita mungkin perlu menetapkan semula sifat align-self dalam CSS kepada nilai lalainya. Dengan menetapkan semula sifat align-self kepada nilai lalainya iaitu auto, atau sebaliknya menggunakan align-item, kami boleh memudahkan CSS dan mengelakkan isu penjajaran.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan harta align-self kepada nilai lalainya dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!