Bagaimana untuk menetapkan harta align-self kepada nilai lalainya dalam CSS?-tutorial css-php.cn

Bagaimana untuk menetapkan harta align-self kepada nilai lalainya dalam CSS?

WBOY

Lepaskan： 2023-09-23 15:53:02

ke hadapan

788 orang telah melayarinya

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;
}

Salin selepas log masuk

atribut align-self dalam CSS

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.

Tetapkan semula align-self kepada nilai lalai dalam CSS

Untuk menetapkan semula atribut align-self kepada nilai lalainya, cuma alih keluar nilai auto atribut daripada pengisytiharan CSS elemen. Contohnya

.element {
   align-self: center;
}

Salin selepas log masuk

Apabila atribut align-self dialih keluar daripada pengisytiharan, ia ditetapkan semula kepada nilai lalainya.

.element {
   /* align-self: center; */
}

Salin selepas log masuk

Sekarang, kami akan meneroka beberapa contoh menetapkan semula sifat align-self kepada nilai lalainya dalam CSS.

Gunakan nilai automatik

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.

Contoh

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>

Salin selepas log masuk

Gunakan pemilih :not()

Pemilih

: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.

Contoh

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>

Salin selepas log masuk

Kesimpulan

Sifat

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!