Bagaimana untuk menjajarkan lajur Flexbox ke kiri dan kanan menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk menjajarkan lajur Flexbox ke kiri dan kanan menggunakan CSS?

王林

Lepaskan： 2023-08-26 21:41:02

ke hadapan

1133 orang telah melayarinya

如何使用 CSS 左右对齐 Flexbox 列？

Flexbox ialah sistem susun atur yang berkuasa dalam CSS yang membolehkan pembangun web mencipta reka bentuk web yang responsif dan fleksibel. Disebabkan keupayaannya untuk menyelaraskan dan menyusun elemen dengan mudah dalam bekas, ia telah menjadi pilihan popular untuk membina tapak web moden. Walau bagaimanapun, menjajarkan sisi kiri dan kanan lajur flexbox boleh menjadi cabaran bagi kebanyakan pembangun, terutamanya apabila berurusan dengan kandungan dinamik atau lebar lajur yang berbeza.

Dalam artikel ini, kami akan membincangkan tentang pelbagai teknik untuk menjajarkan lajur flexbox ke kiri dan kanan menggunakan CSS, termasuk penggunaan sifat flexbox, auto margin dan sifat align-content Pada akhir artikel ini, anda akan mempunyai pemahaman yang lebih baik tentang cara membuat reka letak yang fleksibel dan responsif yang menjajarkan lajur flexbox untuk memenuhi keperluan reka bentuk anda.

Mencipta Lajur Flexbox

Untuk membuat lajur flexbox anda perlu menggunakan sistem susun atur flexbox dalam CSS. Berikut ialah langkah-langkah untuk mencipta lajur flexbox −

Buat bekas induk untuk lajur.
Tetapkan sifat paparan kepada "flex" untuk bekas induk.
Buat elemen kanak-kanak untuk lajur.
Gunakan sifat flexbox untuk menggayakan lajur.

Contoh

Diberikan contoh di bawah menggambarkan tentang cara membuat lajur flexbox.

<!DOCTYPE html>
<html>
<head>
   <style>
      .flex-container {
         display: flex;
         background-color: cyan;
         height: 200px;
         width: 80%;
      }
      .flex-item {
         flex-basis: 33%;
         background-color: red;
         width: 50px;
         margin: 30px;
         text-align: center;
         letter-spacing: 1px;
      }
   </style>
</head>
<body>
   <h1>Flexbox Columns</h1>
   <div class="flex-container">
      <div class="flex-item"> Column 1 </div>
      <div class="flex-item"> Column 2 </div>
      <div class="flex-item"> Column 3 </div>
      <div class="flex-item"> Column 4 </div>
   </div>
</body>
</html>

Salin selepas log masuk

Kaedah untuk Menjajarkan Lajur Flexbox Kiri dan Kanan

Menjajarkan lajur kotak flex ke kiri dan kanan menggunakan CSS boleh dicapai melalui pelbagai teknik. Berikut adalah beberapa kaedah yang paling berkesan −

Untuk menjajarkan lajur ke kiri, tetapkan sifat "align-content" bekas fleksibel kepada "flex-start".

Contoh

Contoh berikut menunjukkan menjajarkan lajur kotak flex ke kiri.

<!DOCTYPE html>
<html>
<head>
   <style>
      .flex-container {
         display: flex;
         background-color: cyan;
         height: 200px;
         width: 100%;
         flex-flow: column wrap;
         align-content: flex-start;
      }
      .flex-item {
         flex-basis: 20%;
         background-color: red;
         width: 100px;
         margin: 30px;
         text-align: center;
         letter-spacing: 1px;
      }
   </style>
</head>
<body>
   <h1>Flexbox Columns</h1>
   <div class="flex-container">
      <div class="flex-item"> Column 1 </div>
      <div class="flex-item"> Column 2 </div>
      <div class="flex-item"> Column 3 </div>
      <div class="flex-item"> Column 4 </div>
      <div class="flex-item"> Column 5 </div>
      <div class="flex-item"> Column 6 </div>
      <div class="flex-item"> Column 7 </div>
      <div class="flex-item"> Column 8 </div>
   </div>
</body>
</html>

Salin selepas log masuk

Menjajarkan Kanan

Untuk menjajarkan lajur ke kanan, tetapkan sifat "align-content" bekas fleksibel kepada "flex-end".

Contoh CSS

.flex-container {
   display: flex;
   background-color: cyan;
   height: 200px;
   width: 100%;
   flex-flow: column wrap;
   align-content: flex-end;
}
.flex-item {
   flex-basis: 20%;
   background-color: red;
   width: 100px;
   margin: 30px;
   text-align: center;
   letter-spacing: 1px;
}

Salin selepas log masuk

Gunakan Auto Margin

Untuk menjajarkan lajur ke kiri, tetapkan sifat "margin-kanan" item flex terakhir kepada "auto". Ini akan menolak item ke sebelah kiri bekas.

Contoh

Untuk menjajarkan lajur ke kanan, tetapkan sifat "margin-kiri" item fleksibel pertama kepada "auto".

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         display: flex;
      }

      .column {
         background-color: orange;
         margin: 10px;
         width: 100px;
         height: 40px;
         text-align: center;
         letter-spacing: 1px;
         padding: 2px;
      }

      .column:last-child {
         margin-right: auto;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="column"> Column 1 </div>
      <div class="column"> Column 2 </div>
      <div class="column"> Column 3 </div>
      <div class="column"> Column 4 </div>
      <div class="column"> Column 5 </div>
   </div>
</body>
</html>

Salin selepas log masuk

Jajar kiri dan kanan serentak

Sehingga kini kami telah menjajarkan lajur ke arah kiri atau kanan bekas fleksibel Sekarang, mari kita selaraskan ke kiri dan kanan secara serentak.

Untuk menjajarkan lajur ke kiri dan kanan, tetapkan sifat "align-content" bekas fleksibel kepada "space-antara".

Contoh

Contoh berikut menunjukkan menjajarkan lajur kotak flex ke kiri dan kanan.

<!DOCTYPE html>
<html>
<head>
   <style>
      .flex-container {
         display: flex;
         background-color: cyan;
         height: 200px;
         width: 100%;
         flex-flow: column wrap;
         align-content: space-between;
      }
      .flex-item {
         flex-basis: 20%;
         background-color: red;
         width: 100px;
         text-align: center;
         letter-spacing: 1px;
      }
   </style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item"> Column 1 </div>
      <div class="flex-item"> Column 2 </div>
      <div class="flex-item"> Column 3 </div>
      <div class="flex-item"> Column 4 </div>
      <div class="flex-item"> Column 5 </div>
      <div class="flex-item"> Column 6 </div>
      <div class="flex-item"> Column 7 </div>
      <div class="flex-item"> Column 8 </div>
      <div class="flex-item"> Column 9 </div>
      <div class="flex-item"> Column 10 </div>
   </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, sifat "align-content" ditetapkan kepada "space-antara", yang mewujudkan jarak yang sama antara lajur.

Kesimpulan

Kesimpulannya, menggunakan flexbox untuk menjajarkan lajur ke kiri dan kanan dalam CSS ialah teknik yang cepat dan mudah untuk mencipta reka letak yang cantik. Anda hanya boleh menukar penjajaran lajur dalam bekas fleksibel dengan memanfaatkan sifat

margin-kiri

dan

margin-kanan

pada komponen anak. Untuk mencapai matlamat ini, kami juga boleh memanfaatkan sifat align-content flexbox. Ini ialah pilihan fleksibel yang berfungsi dengan pelbagai reka bentuk reka letak kerana idea yang sama digunakan sama ada anda perlu menjajarkan satu lajur atau berbilang lajur. Pembangunan web moden memerlukan penggunaan CSS flexbox kerana ia membolehkan penciptaan susun atur dinamik dan responsif yang boleh menyesuaikan diri dengan pelbagai saiz skrin dan jenis peranti

Atas ialah kandungan terperinci Bagaimana untuk menjajarkan lajur Flexbox ke kiri dan kanan menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!