Bagaimana untuk menjajarkan item flex ke kanan?-tutorial css-php.cn

Bagaimana untuk menjajarkan item flex ke kanan?

王林

Lepaskan： 2023-09-22 08:17:02

ke hadapan

1520 orang telah melayarinya

Bagaimana untuk menjajarkan item flex ke kanan?

CSS ialah modul berkuasa yang digunakan oleh pereka web untuk mengawal reka letak visual tapak web. Salah satu reka letak visual yang paling biasa digunakan dalam reka bentuk web ialah penggunaan flex-box untuk mencipta reka letak web yang fleksibel dan dinamik. Ia menyediakan cara yang mudah dan berkesan untuk menjajarkan item dalam bekas dengan cara yang berbeza, termasuk item flex menjajarkan ke kanan.

Apakah flex-box?

Mula-mula kita perlu faham apa itu flex-box. Flex-box ialah modul susun atur CSS yang menyediakan cara yang fleksibel untuk membuat reka letak untuk saiz dan peranti skrin yang berbeza. Ia dibina berdasarkan dua konsep utama: yang pertama ialah bekas fleksibel, iaitu elemen induk yang mengandungi satu atau lebih item fleksibel; Elemen bekas menggunakan set sifat CSS untuk mengawal susun atur item fleksibel.

Flexbox berfungsi dengan mentakrifkan elemen bekas dan anak-anaknya sebagai item fleksibel. Elemen bekas ditakrifkan menggunakan paparan: atribut fleksibel, yang membolehkan mod susun atur fleksibel. Elemen kanak-kanak kemudiannya diletakkan dan diselaraskan di dalam bekas menggunakan satu set sifat fleksibel.

Beberapa sifat flexbox yang paling biasa digunakan termasuk -

justify-content - Digunakan untuk menjajarkan item lentur di sepanjang paksi utama bekas
align-item - Digunakan untuk menjajarkan item lentur di sepanjang paksi mendatar bekas
flex-direction − Digunakan untuk menentukan arah paksi utama bekas (mendatar atau menegak)
flex-wrap - Ia digunakan untuk mentakrifkan cara item flex harus dibalut di dalam bekas
flex-grow - Ia digunakan untuk menentukan berapa banyak item perlu berkembang untuk mengisi ruang yang ada
flex-shrink - Ia digunakan untuk menentukan berapa banyak item perlu mengecut agar sesuai dengan ruang yang ada

Item fleksibel menjajarkan kanan bermakna meletakkannya di sebelah kanan bekas. Terdapat beberapa cara untuk mencapai ini dengan CSS, dalam artikel ini kita akan meneroka dua cara untuk mencapai ini -

Kaedah 1: Gunakan atribut justify-content

justify-content property digunakan untuk menjajarkan item lentur di sepanjang paksi utama bekas. Untuk menjajarkan item ke kanan, kami menetapkan nilai justify-content kepada flex-end.

Contoh

Dalam contoh di bawah, kami mempunyai bekas dengan tiga elemen kanak-kanak, setiap satu dengan kelas bernama kanak-kanak. Untuk mencipta item flex dijajarkan ke kanan, kami menambah kelas lain yang dipanggil right-align pada item ketiga. Dalam CSS, kami menetapkan sifat display bekas kepada flex untuk mendayakan reka letak flexbox. Kami kemudian menggunakan atribut justify-content untuk mengagihkan item pada paksi utama dan menambah jarak antara item tersebut. Akhir sekali, kami menggunakan atribut margin-left: auto untuk menolak item yang dijajarkan ke kanan ke tepi kanan bekas.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      .my-container {
         display: flex;
         justify-content: space-between;
         background-color: lightgray;
      }
      .child {
         background-color: green;
         color: #fff;
         padding: 5px;
         margin: 3px;
      }
      .right-align { margin-left: auto; }
   </style>
</head>
   <body>
      <h3>Right-aligning flex using justify-content property</h3>
      <div class="my-container">
         <div class="child">Item 1</div>
         <div class="child">Item 2</div>
         <div class="child right-align">Item 3</div>
      </div>
   </body>
</html>

Salin selepas log masuk

Kaedah 2: Gunakan atribut align-self

Atribut

align-self digunakan untuk menjajarkan satu item lentur di sepanjang paksi silang bekas. Untuk menjajarkan ke kanan item tertentu, kami menetapkan nilai align-self kepada flex-end.

Contoh

Dalam contoh di bawah, kita mempunyai bekas dengan tiga elemen anak, setiap elemen anak kontena mempunyai kelas bernama kanak-kanak. Untuk mencipta item flex dijajarkan ke kanan, kami menambah kelas lain yang dipanggil right-align pada item ketiga. Dalam CSS, kami menetapkan sifat display bekas kepada flex untuk mendayakan susun atur flexbox dan sifat flex-direction Untuk #🎜 🎜#lajur, tindanan item secara menegak. Kami juga menetapkan lebar setiap item kepada 100% untuk memastikan ia mengambil keseluruhan lebar bekas.

Untuk menjajarkan item ketiga ke kanan, kami menggunakan sifat

align-self pada item yang dijajarkan ke kanan dan tetapkan nilainya kepada flex-end#🎜 🎜# . Ini memberitahu item untuk menjajarkan dirinya pada paksi silang ke hujung bekas.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      .my-container {
         display: flex;
         flex-direction: column;
         background-color: lightgray;
      }
      .child {
         background-color: red;
         color: #fff;
         margin: 3px;
         padding: 5px;
      }
      .right-align { align-self: flex-end; }
   </style>
</head>
   <body>
      <h3>Right-aligning flex using align-self property</h3>
      <div class="my-container">
         <div class="child">Item 1</div>
         <div class="child">Item 2</div>
         <div class="child right-align">Item 3</div>
      </div>
   </body>
</html>

Salin selepas log masuk

Dalam CSS, item Flex penjajaran kanan boleh dilakukan dengan mudah menggunakan Flexbox. Dengan mentakrifkan elemen kontena sebagai bekas Flex dan menetapkan sifat CSS yang sesuai, kami boleh mencipta reka letak web yang fleksibel dan dinamik yang menyesuaikan diri dengan saiz dan orientasi skrin yang berbeza.
Atas ialah kandungan terperinci Bagaimana untuk menjajarkan item flex ke kanan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!