Bekas kanak-kanak dengan paparan: inline-flex tidak mengisi bekas induk secara automatik. Saiznya bergantung pada kandungannya dan sebarang gaya tambahan yang digunakan padanya.
Bekas kanak-kanak dengan paparan: flex mengisi lebar bekas induk secara automatik kerana flex berkelakuan seperti elemen peringkat blok, yang mengembang agar muat pada lebar yang tersedia ibu bapa secara lalai.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/style.css" />
</head>
<body>
<h1>inline-flex</h1>
<div>
<p>CSS<br>
</p>
<pre class="brush:php;toolbar:false">body {
background: transparent;
color: #fcbe24;
padding: 0 24px;
margin: 0;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container {
background-color: white;
color: black;
}
.inline-flex-c {
display: inline-flex;
background-color: palevioletred;
}
.flex-c {
display: flex;
background-color: chocolate;
}
.child{
border-color: greenyellow;
border-style: solid;
}
Bekas flex terbentang untuk memenuhi lebar penuh bekas induknya. Sebaliknya, bekas inline-flex hanya menempati lebar yang diperlukan oleh kandungannya.
Atas ialah kandungan terperinci CSS - paparan: flex vs inline-flex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kaedah pemindahan pangkalan data MySQL
Apakah awan peribadi?
Apakah yang perlu saya lakukan jika gpedit.msc tidak boleh dibuka?
penggunaan fungsi rowcount
Akar telefon mudah alih
vcruntime140.dll tidak dapat ditemui dan pelaksanaan kod tidak dapat diteruskan
Bagaimana untuk membuka fail csv
Bagaimana untuk membuat wang dengan blockchain
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
