自从用习惯flex布局我基本已经不怎么使用float了。
现在又出现了grid布局,就像flex的升级版,布局上十分强大。
主要属性:
grid-template-columns://竖向排列
grid-template-rows://横向排列
首先比较一下flex和grid实现自适应九宫格,高度800px,宽度适应:
flex
超过一层后样式就复杂了,特别是边框的处理有点复杂。(方法很多,不一一去展示了)。
<html>
<head>
<style type="text/css">
.box {
padding: 10px;
padding-bottom: 0;
padding-right: 0;
display: flex;
flex-direction: column;
height: 800px;
calc(100vw - 20px);
background-color: #000;
}
.content {
display: flex;
margin-bottom: 10px;
flex: 1
}
.b {
flex: 1;
margin-right: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
</div>
<div class="content">
<div class="b">4</div>
<div class="b">5</div>
<div class="b">6</div>
</div>
<div class="content">
<div class="b">7</div>
<div class="b">8</div>
<div class="b">9</div>
</div>
<div>
</body>
</html>
grid
真的好用!方法也可以有很多,相对flex而言写起来简单多了哈
<html>
<head>
<style type="text/css">
.content {
padding: 10;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
height: 780px; //padding 有个20的宽度
background-color: #000;
grid-gap: 10px;
}
.b {
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
<div class="b">5</div>
<div class="b">6</div>
<div class="b">7</div>
<div class="b">8</div>
<div class="b">9</div>
</div>
</body>
</html>
效果图:
接下来就只讲grid了。
常用属性,属性很多,主要练习下常用的一些属性:
- grid: 1fr 1fr 1fr/1fr 1fr 1fr ; 高度 高度 高度/(一)列 (二)列 (三) 列
grid: 100px 200px 100px /1fr 1fr 1fr;
等于:
grid-template-rows: 100px 200px 100px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: none;
grid-auto-flow: initial;
grid-auto-rows: initial;
grid-auto-columns: initial;
-
grid-template-columns: 100px 100px; //有几列,每列有多大
-
grid-template-rows :100px 100px; //有几行,每行有多大
-
grid-template: [] '1 1 1' 100px [] /auto 50px auto;
//[名称] '几列' 这行的高度 [名称] /三列对应的三个宽度
//(名称可为空 '1 1 1' 就是均分三列) -
grid-gap: 10px 20px ;//上下间隔10px,左右间隔20px
-
grid-gap: 10px;//上下左右间隔10px
-
grid-column-gap
-
grid-row-gap
-
justify-items:
start:将内容对齐到网格区域(grid area)的左侧
end:将内容对齐到网格区域的右侧
center:将内容对齐到网格区域的中间(水平居中)
stretch:填满网格区域宽度(默认值) -
align-items:
start:将内容对齐到网格区域(grid area)的顶部
end:将内容对齐到网格区域的底部
center:将内容对齐到网格区域的中间(垂直居中)
stretch:填满网格区域高度(默认值) -
justify-items:
start:将网格对齐到 网格容器(grid container) 的左边
end:将网格对齐到 网格容器 的右边
center:将网格对齐到 网格容器 的中间(水平居中)
stretch:调整 网格项(grid items) 的宽度,允许该网格填充满整个 网格容器 的宽度
space-around:在每个网格项之间放置一个均匀的空间,左右两端放置一半的空间
space-between:在每个网格项之间放置一个均匀的空间,左右两端没有空间
space-evenly:在每个栅格项目之间放置一个均匀的空间,左右两端放置一个均匀的空间 -
align-content:
start:将网格对齐到 网格容器(grid container) 的顶部
end:将网格对齐到 网格容器 的底部
center:将网格对齐到 网格容器 的中间(垂直居中)
stretch:调整 网格项(grid items) 的高度,允许该网格填充满整个 网格容器 的高度
space-around:在每个网格项之间放置一个均匀的空间,上下两端放置一半的空间
space-between:在每个网格项之间放置一个均匀的空间,上下两端没有空间
space-evenly:在每个栅格项目之间放置一个均匀的空间,上下两端放置一个均匀的空间
这是主体上常用的一些属性了,不想做文档解释了。讲属性的文章挺多的,主要就是练习,多用用。
原文:https://www.jianshu.com/p/41c038baf994