Artikel ini menunjukkan cara menjajarkan teks secara menegak di dalam kotak fleksibel:
Kaedah 1: Menggunakan Harta 'align-item'.
Untuk menjajarkan teks secara menegak, pengguna boleh menggunakan ' align-item ” harta yang disediakan oleh CSS. Ia membantu elemen untuk menetapkan penjajaran mereka di dalam kotak fleksibel. Kedudukan penjajaran menegak yang mungkin boleh berada di ' atas ”, tengah ”, atau “ bawah ” sebelah.
Demonstrasi praktikal untuk menjajarkan elemen dalam arah ini dinyatakan di bawah:
Contoh 1: Kedudukan Teratas
Untuk menjajarkan teks di dalam kotak fleksibel di kedudukan atas, “ flex-start nilai ' diberikan kepada ' align-item ” harta benda. Sifat ini diberikan kepada div utama yang akan dipaparkan sebagai flex. Mari kita anggap, div dengan kelas ' menegak ” dicipta dalam fail HTML. Kemudian dalam fail CSS, pilih kelas itu dan tetapkan sifat berikut:
.menegak {
warna : putih ;
ketinggian : 150px ;
paparan : lentur ;
padding-left : 20px ;
align-item : flex-start ;
warna latar belakang : hutan hijau ;
}
- Pertama, penggayaan dan penjajaran asas diberikan kepada div menggunakan ciri warna, warna latar belakang dan ketinggian CSS.
- Sifat 'paparan' juga ditetapkan kepada 'flex' untuk menjadikannya kotak fleksibel.
- Akhir sekali, untuk memaparkan teks pada permulaan flexbox, tetapkan sifat 'align-item' kepada 'flex-start.
Selepas melaksanakan kod di atas, halaman web kelihatan seperti ini:
Output memaparkan bahawa teks kini diselaraskan di kedudukan teratas di dalam kotak fleksibel.
Contoh 2: Kedudukan Tengah
Untuk menjajarkan teks secara menegak pada kedudukan tengah, tetapkan “ pusat ' nilai kepada CSS ' align-item ” harta:
.menegak {warna : putih ;
ketinggian : 150px ;
paparan : lentur ;
padding-left : 20px ;
align-item : pusat ;
warna latar belakang : hutan hijau ;
}
Selepas pelaksanaan kod di atas:
Output di atas memaparkan bahawa teks kini diselaraskan di tengah kotak fleksibel.
Contoh 3: Kedudukan Bawah
Untuk menetapkan teks di bahagian bawah kotak fleksibel, tetapkan “ hujung lentur nilai ' kepada ' align-item ” harta benda. Kali ini teks akan diselaraskan pada kedudukan di mana flexbox berakhir bermakna di bahagian bawah:
.menegak {warna : putih ;
ketinggian : 150px ;
paparan : lentur ;
padding-left : 20px ;
align-item : hujung lentur ;
warna latar belakang : hutan hijau ;
}
Selepas melaksanakan kod di atas, halaman web kelihatan seperti ini:
Output di atas memaparkan bahawa teks kini dijajarkan secara menegak di kedudukan bawah.
Kaedah 2: Menggunakan Harta 'justify-content'.
' justify-content harta ” juga boleh digunakan untuk menjajarkan teks secara menegak di dalam kotak fleksibel. Walau bagaimanapun, ia berfungsi sama seperti ' penjajaran teks ” harta dan ia menjajarkan elemen dalam arah baris. Jadi, untuk menukar arah penjajaran, ' arah lentur harta ' digunakan untuk menetapkan ' justify-content 'penjajaran ke arah' kolum ” arah:
.menegak {ketinggian : 150px ;
paparan : lentur ;
padding-left : 20px ;
warna : putih ;
warna latar belakang : darkcyan ;
arah lentur : kolum ;
justify-content : hujung lentur ;
}
Penjelasan kod di atas disediakan di bawah:
- ' ketinggian ”, “ warna ” dan “ padding-left ” hartanah berfungsi seperti kaedah di atas.
- Selepas itu, tetapkan ' kolum nilai ' kepada ' arah lentur ” daripada kotak fleksibel untuk menggunakan gaya melalui lajur.
- Selepas itu, ' justify-content ” sifat menjajarkan teks secara menegak.
- Pada akhirnya, ' hujung lentur nilai ” menjajarkan elemen pada “ bawah ” sebelah.
Catatan : Pengguna juga boleh menetapkan “ flex-start ” dan “ pusat nilai ' kepada ' atas ”, dan “ tengah ” pihak masing-masing.
Sebagai contoh, selepas melaksanakan kod di atas halaman web kelihatan seperti ini:
Output di atas memaparkan bahawa teks dijajarkan di bahagian bawah kotak fleksibel.
Kesimpulan
Untuk menjajarkan teks secara menegak di dalam kotak fleksibel, ' align-item ” dan “ justify-content ” Sifat CSS boleh digunakan. Kedua-dua sifat ini mendapat “ flex-start ”, “ pusat ” atau “ hujung lentur nilai ' untuk menyelaraskan teks pada ' atas ”, “ tengah ” dan “ bawah ” arah di dalam kotak flex, masing-masing. Artikel ini telah menunjukkan penjajaran menegak teks dalam kotak fleksibel.