css布局 彈性布局 和 網格布局
阿新 • • 發佈：2018-03-09
dad lex ima shu rap tps brush get png
這裏就不寫這兩種布局的內容了
彈性布局鏈接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
網格布局鏈接：https://www.jianshu.com/p/d183265a8dad
小測試：
用 flex 與 grid 實現如下即可：
<html>
<head>
<style>
/* flex */
.box {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.box div {
width: calc(100% / 3);
height: 100px;
border: 1px solid black;
}
/* grid */
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
}
.box div {
height: 100px;
border: 1px solid black;
}
</style>
<head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<body>
</html>
css布局 彈性布局 和 網格布局