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.
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.
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>
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
<!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>
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;
}
Contoh
<!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>
Sehingga kini kami telah menjajarkan lajur ke arah kiri atau kanan bekas fleksibel Sekarang, mari kita selaraskan ke kiri dan kanan secara serentak.
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>
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-kiripada 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!
Bagaimana untuk menjadikan latar belakang telus dalam ps
Kaedah projek permulaan Webstorm
Cara menggunakan fungsi pilih
Bolehkah data antara sistem Hongmeng dan sistem Android boleh beroperasi?
pintu masuk laman web rasmi platform dagangan okx
Apakah fail .exe
Perbezaan antara scratch dan python
tutorial pemasangan panduan pelayan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
