flex 和塊顯示屬性有什么區別？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex{
display: flex;
background-color: red;
height: 200px;
}
.block{
height: 200px;
background-color: rgb(51, 170, 120);
display: block;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit <p class="flex">Hello</p> adipisicing elit. Alias velit optio, quod tenetur omnis, in voluptas corporis voluptatem quaerat iure reprehenderit quasi accusamus sed dignissimos odio ex ipsam dolor consequatur.</div>
<div>Lorem ipsum dolor sit <p class="block">Hello</p> adipisicing elit. Alias velit optio, quod tenetur omnis, in voluptas corporis voluptatem quaerat iure reprehenderit quasi accusamus sed dignissimos odio ex ipsam dolor consequatur.</div>
</body>
</html>
在這段代碼中，兩者的作業方式相同。有人可以幫我嗎？？:(
uj5u.com熱心網友回復：
乍一看，它們看起來很相似，但它們不是……關鍵是可以display: flex訪問該flexbox model功能。要檢查這一點，您可以向.flex類選擇器添加兩個屬性：align-items: center;和justify-content: center;
display block“元素生成一個塊元素框，在正常流中在元素之前和之后生成換行符。” MDNdisplay flex“該元素的行為類似于塊元素，并根據flexbox 模型布置其內容。” MDN
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353049.html