• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

CSS Grid和Flexbox解决实际的布局问题

CSS3 web前端中文站 2年前 (2018-01-10) 828次浏览 已收录 0个评论

CSS3 Grid LayoutGridFlexboxLayout布局

就目前为止,CSS 的GridFlexbox结合将是解决布局的最佳方案。虽然浏览器对 CSS Grid 和Flexbox的属性未完全支持,但对于实现布局而言,这已是一种非常完美的结合。如果 CSS Box Alignment Module Level3 能得到更好的支持的话,那么对于 Web 的布局将是一种福音。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

就前面学习的 CSS Grid和 CSS Flexbox,我们对 CSS 的Flexbox和 Grid 有了很深入的了解。特别是在《使用 CSS GridFlexbox制作 Card》一文中,已经见识到了 CSS Grid和 Flexbox 结合对布局的巨大优势。那么这篇文章,将再一次向大家展现 CSS Grid 和 Flexbox 的强大之处。那是因为他们的结合将解决布局的实际问题。

开始之前

在深入介绍 Flexbox 和 Grid 结合优势之前,先来看看这样的一个需求。需要做一个响应式设计,这个设计效果看起来复杂,在不同的视窗中,改变顺序和布局的效果。这个设计效果看起来复杂,但用 CSS 的 Grid 和 Flexbox 来实现这样的布局,就会显得容易多了。

先来看我们需要的设计风格:

CSS Grid 和 Flexbox 解决实际的布局问题

上面的是设计草图。从草图上可以看出,不管是什么样的屏幕下,整个 Card 有四个区域:ABCD。那么我们就很容易借助 Grid 来构建这几个区域了。

构建 CSS Grid

从上面的草图我们可以看出,我们可以把整个卡片分成四个区域。如下图:

CSS Grid 和 Flexbox 解决实际的布局问题

如果你接触过 CSS 的 Grid,你肯定知道,有一些属性是浏览器还不支持的。不过这里咱们不纠结这一部分,在这个示例中,使用浏览器已支持的属性。那么回到示例中来,我们整个 Card 分为四个区域。那么对应的 HTML 中,我们也是使用四个区域:

<div class="card">     
<div class="grid-area grid-area_a">A 区</div>     
<div class="grid-area grid-area_b">B 区</div>    
<div class="grid-area grid-area_c">C 区</div>     
<div class="grid-area grid-area_d">D 区</div> 
</div> 

你可以具体化每个区域。但暂时我们不处理每个区域内部内容。

移动端优先

了解响应式布局的同学都应该知道,在响应式布局中,遵循的原则是移动端先行。那咱们先实现移动端的布局。

这是一个非常简单的网格布局。我们可以使用 CSS 的 Grid 来实现:

.card {     
display: grid;     
grid-template-rows: repeat(3, min-content);     
grid-template-columns: 33% calc(67% - 55px) 55px;     
grid-auto-rows: min-content; } 
.grid-area_a {     
grid-row: 1 / span 2;     
grid-column: 1;     
background-color: green; }  
.grid-area_b {     
grid-row: 1;     
grid-column: 2 / span 2;     
background-color: orange; }  
.grid-area_c {     
grid-row: 2;     
grid-column: 2 / span 2;     
background-color: lime; }  
.grid-area_d {     
grid-row: 3;     
grid-column: 1 / span 3;     
background-color: yellow; } 

通过 Firefox 浏览器网格调试工具,我们可以看很清楚的看出我们的网格分布图:

CSS Grid 和 Flexbox 解决实际的布局问题

再给.card添加一下基本样式:

.card {     
max-width: 300px;     
position: relative;     
padding: 15px 10px;     
background-color: gray; } 

可以看到的效果如下:

CSS Grid 和 Flexbox 解决实际的布局问题

上面看到的效果仅是几个区域的布局效果。我们接下来给里面添加内容,并加上对应的效果,看到的卡片效果如下:

CSS Grid 和 Flexbox 解决实际的布局问题

上面的草图对于移动端还有第二种风格。

.card {     
display: grid;     
grid-template-rows: repeat(3, min-content);     
grid-template-columns: 33% calc(67% - 95px) 95px;     
grid-auto-rows: min-content; } 
.grid-area_a {     
grid-row: 1 / span 3;     
grid-column: 1; }  
.grid-area_b {     
grid-column: 2; }  
.grid-area_c {     
grid-row: 2;     
grid-column: 2; }  
.grid-area_d {     
grid-row: 1 / span 3;     
grid-column: 3;     } 

CSS Grid 和 Flexbox 解决实际的布局问题

PC 端布局

移动端先行,上面我们实现了两种移动端的布局。接下来处理 PC 端,也就是桌面端。这个我们通过媒体查询来处理。

@media only screen and (min-width: 768px) {     
.card {         
grid-template-rows: repeat(4, min-content);         
grid-template-columns: 100%;     }      
.grid-area {         
grid-column: 1;     }      
.grid-area_a {         
grid-row: 1;     }      
.grid-area_b {         
grid-row: 2;     }      
.grid-area_c {         
grid-row: 3;     }      
.grid-area_d {         
grid-row: 4;     }      
.grid-area_d {         
flex-direction: row;     } } 

效果如下:

CSS Grid 和 Flexbox 解决实际的布局问题

多卡片

上面看到的效果,我们只是一张卡片。如果我们有N张卡片呢?首先我们在 HTML 中复制一下.card的结构。让我们的页面具有N张卡片。

同样是移动端先行。代码稍做调整:

.card {     
max-width: calc(100vw - 10px); }  
body {     
display: grid;     
grid-auto-rows: min-content; }  
@media only screen and (min-width: 768px) {     
body {         
grid-template-columns: repeat(4, auto);     }     
.card {         
max-width: 400px;         
grid-template-rows: repeat(4, min-content);         
grid-template-columns: 100%;         
margin: 5px;     }     ... } 

拖动你的浏览器,可以看到的效果如下:

CSS Grid 和 Flexbox 解决实际的布局问题

具体的 Demo 效果可以看 Codepen 上的效果:

如果想查看第二个 Demo 的示例效果,可以点击这里查看。(这个示例的效果略有欠缺,感兴趣的同学可以自己调整。也算是当做一个作业吧(^_^))。

总结

如果你阅读过早前写的《使用 CSS Grid 和 Flexbox 制作 Card》一文,那么你会感觉到,其效果和原理非常的相似。

通过这两篇文章的实例效果,再次验证 CSS Grid 有助于解决复杂的布局问题,并且从一开始就可以查看这些到布局问题所在。简而言之,可以能过简单的代码,实现复杂的布局。

另外 CSS Grid 是一个二维布局,可以解决主结构的布局,再配上 Flexbox 布局,就可以解决一些等高之类的布局效果。如果你对 CSS Box Alignment Module Level3 熟悉的话,那么我们的布局就会更完美。

虽然这三个模块还有部分属性未得到浏览器的支持,但是我们要相信,这一天会慢慢的到来。到那一天,我们就不再需要为布局困惑。我们一期慢慢期待,小站也会时刻关注这方面的信息,并且会时刻保持相关的更新。如果你感兴趣,欢迎关注后续的更新。

web 前端中文站点评:

关于 Grid 的学习,这篇文章只是初步介绍了 Grid 的布局问题,接下来大家可以继续学习阅读《如何使用 CSS GRID 布局实现限宽容器全屏效果》、《CSS GRID 布局这样玩》、《探讨 CSS GRID LAYOUT 在原生客户端中运用》和《深入理解 FLEX 布局以及计算》,形成对比学习。

 

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS Grid 和 Flexbox 解决实际的布局问题
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址