[css] 手寫一個滿屏品字布局的方案
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<article class="container">
<div class="firstRow">
<div class="item"></div>
</div>
<div class="secondRow">
<div class="item"></div>
<div class="item"></div>
</div>
</article>
</body>
</html>
//style.css
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.firstRow, .secondRow {
width: 100%;
height: 30%;
display: flex;
flex-direction: row;
justify-content: center;
margin: 10px 0;
}
.item {
background-color: red;
width: 40%;
height: 100%;
margin: 0 auto;
border-radius: 10%;
}
個人簡介
我是歌謠，歡迎和大家一起交流前后端知識，放棄很容易，
但堅持一定很酷，歡迎大家一起討論
主目錄
與歌謠一起通關前端面試題
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/262886.html
標籤：其他
上一篇：Flink常用操作命令