flex
超过一层后样式就复杂了，特别是边框的处理有点复杂。(方法很多，不一一去展示了)。
<html><head><styletype="text/css">.box { padding: 10px; padding-bottom: 0; padding-right: 0; display: flex; flex-direction: column; height: 800px; width: 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><divclass="box"><divclass="content"><divclass="b">1</div><divclass="b">2</div><divclass="b">3</div></div><divclass="content"><divclass="b">4</div><divclass="b">5</div><divclass="b">6</div></div><divclass="content"><divclass="b">7</div><divclass="b">8</div><divclass="b">9</div></div><div></body></html>
效果图：
flex
grid
真的好用！方法也可以有很多，相对flex而言写起来简单多了哈
<html><head><styletype="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><divclass="content"><divclass="b">1</div><divclass="b">2</div><divclass="b">3</div><divclass="b">4</div><divclass="b">5</div><divclass="b">6</div><divclass="b">7</div><divclass="b">8</div><divclass="b">9</div></div></body></html>
效果图：
grid
接下来就只讲grid了。
常用属性，属性很多，主要练习下常用的一些属性：
grid: 1fr 1fr 1fr/1fr 1fr 1fr ; 高度 高度 高度/(一)列 (二)列 (三) 列
grid: 100px 200px 100px /1fr 1fr 1fr;
等于：
grid-template-rows:100px200px100px;grid-template-columns:1fr1fr1fr;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：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间
网友评论