Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menggunakan elemen Flexbox dalam CSS?
Bagaimana untuk menggunakan elemen Flexbox dalam CSS?
- 王林ke hadapan
- 2023-08-26 21:41:08843semak imbas
Tentukan bekas Flex dan tetapkan item Flex di dalamnya.
Anda boleh cuba menjalankan kod berikut untuk memahami cara melaksanakan elemen Flexbox. Q1, Q2, dan Q3 di sini adalah item anjal. Seluruh kawasan adalah elemen Flexbox
Contoh
Demo secara langsung
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
</div>
</body>
</html>Atas ialah kandungan terperinci Bagaimana untuk menggunakan elemen Flexbox dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menjajarkan lajur Flexbox ke kiri dan kanan menggunakan CSS?Artikel seterusnya：Bagaimana untuk menjajarkan lajur Flexbox ke kiri dan kanan menggunakan CSS?