请选择 进入手机版 | 继续访问电脑版

葡萄城产品技术社区

    注册

QQ登录

SpreadJS

纯前端控件,类似Excel,问题响应通道

ComponentOne WPF

前沿科技,针对WPF桌面,问题响应通道

C1FlexGrid视频教程

WinForm平台,功能强大的表格控件,初学者必看视频

ActiveReport视频教程

轻松搞定报表,从头开始学AR,视频教程

搜索
查看: 510|回复: 0

[原创] 如何使用Flexbox和CSS Grid,实现高效布局

[复制链接]

260

主题

261

帖子

2938

积分

超级版主

Rank: 8Rank: 8

积分
2938

微信认证勋章

发表于 2017-9-20 13:52:49 | 显示全部楼层 |阅读模式
本帖最后由 断天涯大虾 于 2017-9-20 14:04 编辑

CSS浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想。幸运的是,在现代网页设计时代,使用Flexbox和CSS Grid来对齐元素,变得相对容易起来。

使用Flexbox可以使元素对齐变得容易,因此Flexbox已经被广泛使用了。

同时,CSS Grid 布局也为网页设计行业带来了很大的便利。虽然CSS Grid 布局未被广泛采用,但是浏览器逐渐开始增加对CSS Grid布局的支持。

虽然Flexbox和CSS Grid可以完成类似的布局,但是本次,我们学习的是如何组合使用这两个工具,而不是只选择其中的一个。在不久的将来,当CSS Grid 布局获得完整的浏览器支持时,设计人员就能够利用每个CSS组合的优势,来创建最有效和最有趣的布局设计。

测试Flexbox和CSS Grid的基本布局
我们从一个很简单且熟悉的布局类型开始,包括标题,侧边栏,主要内容和页脚等部分。通过这样一个简单的布局,来帮助我们快速找到各种元素的布局方法。
下面是需要创建的内容:
要完成这个基本布局, Flexbox需要完成的主要任务包括以下方面:
Ø  创建完整宽度的header和footer
Ø  将侧边栏放置在主内容区域左侧
Ø  确保侧边栏和主内容区域的大小合适
Ø  确保导航元素定位准确

基本HTML结构
  1. <div class="container">
  2.    <header>
  3.        <nav>
  4.          <ul>
  5.             <li></li>
  6.             <li></li>
  7.             <li></li>
  8.          </ul>
  9.        </nav>
  10.        <button></button>
  11.    </header>
  12.    <div class="wrapper">
  13.        <aside class="sidebar">
  14.             <h3></h3>
  15.        </aside>
  16.        <section class="main">
  17.             <h2></h2>
  18.             <p></p>
  19.        </section>
  20.    </div><!-- /wrapper -->
  21.    <footer>
  22.        <h3></h3>
  23.        <p></p>
  24.    </footer>
  25. </div><! -- /container -->
复制代码
如何使用Flexbox创建布局Header样式
我们从外到内,逐层开始设计,首先将display: flex; 添加到container,这也是所有Flexbox布局的第一步。接着,将flex-direction设置为column,确保所有部分彼此相对。
  1. .container {
  2.    display: flex;
  3.    flex-direction: column;
  4. }
复制代码
通过display: flex;自动创建一个全宽的header(header默认情况下是块级元素),。通过这个声明,导航元素的放置会变得很容易。

导航栏的左侧有一个logo和两个菜单项,右侧有一个登录按钮。导航位于header中,通过justify-content: space-between;可以实现导航和按钮之间的自动间隔。

在导航中,使用align-items: baseline;能够实现所有导航项目与文本基线的对齐,这样也使得导航栏看起来更加统一。
file:///C:/Users/andyli/AppData/Local/Temp/msohtmlclip1/01/clip_image004.jpg
代码如下:
  1. header{
  2.    padding: 15px;
  3.    margin-bottom: 40px;
  4.    display: flex;
  5.    justify-content: space-between;
  6. }
  7. header nav ul {
  8.    display: flex;
  9.    align-items: baseline;
  10.    list-style-type: none;
  11. }
复制代码
页面内容样式
接下来,将侧边栏和主内容区域使用一个wrapper包含起来。具有.wrapper类的div,也需要设置display:flex; 但是flex方向与上述不同。这是因为侧边栏和主内容区域彼此相邻而不是堆叠。
  1. .wrapper {
  2.    display: flex;
  3.    flex-direction: row;
  4. }
复制代码
file:///C:/Users/andyli/AppData/Local/Temp/msohtmlclip1/01/clip_image006.jpg
主内容区域和侧边栏的大小设置非常重要,因为重要的信息都在这里展示。主内容区域应该是侧边栏大小的三倍,使用Flexbox很容易实现这点。
  1. .main {
  2.    flex: 3;
  3.    margin-right: 60px;
  4. }
  5. .sidebar {
  6.   flex: 1;
  7. }
复制代码
总的来说,Flexbox在创建这个简单的布局时,十分高效。尤其在控制列表元素样式和设置导航与按钮之间的间距方面,特别有用。

如何使用CSS Grid 创建布局
为了测试效率,接下来使用CSS Grid创建相同的基本布局。

Grid模板区域
CSS Grid的方便之处在于,可以指定模板区域,这也使得定义布局变得非常直观。采取这种方法,网格上的区域可以命名并引用位置项。对于这个基本布局,我们需要命名四个项目:
Ø  header
Ø  main content
Ø  sidebar
Ø  footer
基本HTML结构
  1. <div class="container">
  2.    <header>
  3.        <nav>
  4.          <ul>
  5.             <li></li>
  6.             <li></li>
  7.             <li></li>
  8.          </ul>
  9.        </nav>
  10.        <button></button>
  11.    </header>
  12.    
  13.    <aside class="sidebar">
  14.        <h3></h3>
  15.        <ul>
  16.             <li></li>
  17.             <li></li>
  18.    <li></li>
  19.    <li></li>
  20.    <li></li>
  21.          </ul>
  22.    </aside>
  23.    <section class="main">
  24.        <h2></h2>
  25.        <p></p>
  26.         <p> </p>
  27. </section>
  28.    <footer>
  29.        <h3></h3>
  30.        <p></p>
  31.    </footer>
  32. </div>
复制代码
我们按照顺序在grid container中定义这些区域,就像绘制它们一样。
grid-template-areas:
       "header header"
       "sidebar main"
       "footer footer";
当前侧边栏位于左侧,主区域内容位于右侧,如果需要,也可以轻松更改顺序。

有一件事要注意:这些名字需要“连接”到样式上。所以需要在header block中,添加grid-area: header;。
  1. header{
  2.    grid-area: header;
  3.    padding: 20px 0;
  4.    display: grid;
  5.    grid-template-columns: 1fr 1fr;
  6. }
复制代码
HTML结构与Flexbox示例中的相同,但CSS与创建网格布局完全不同。
  1. .container{
  2.    max-width: 900px;
  3.    background-color: #fff;
  4.    margin: 0 auto;
  5.    padding: 0 60px;
  6.    display: grid;
  7.    grid-template-columns: 1fr 3fr;
  8.    grid-template-areas:
  9.        "header header"
  10.        "sidebar main"
  11.        "footer footer";
  12.    grid-gap: 50px;
  13. }
复制代码
使用CSS Grid布局时,在container中设置display: grid;非常重要。此处声明grid-template-columns,是为了确保页面的整体结构。这里grid-template-column已将侧边栏和主内容区域大小设置为1fr和3fr。fr是网格的分数单位。file:///C:/Users/andyli/AppData/Local/Temp/msohtmlclip1/01/clip_image010.jpg

接下来,需要调整header容器中的fr单元。将grid-template-columns设置为1fr和1fr。这样header中就有两个相同大小的列,放置导航项和按钮会很合适。
  1. header{
  2.    grid-area: header;
  3.    display: grid;
  4.    grid-template-columns: 1fr 1fr;
  5. }
复制代码
file:///C:/Users/andyli/AppData/Local/Temp/msohtmlclip1/01/clip_image012.jpg
要放置按钮,我们只需要将justify-self设置为end。
  1. header button {
  2.    justify-self: end;
  3. }
复制代码
导航的位置按照以下方式设置:
  1. header nav {
  2.    justify-self: start;
  3. }
复制代码

如何使用Flexbox和CSS Grid创建布局
最后,我们通过组合Flexbox和CSSGrid来创建更复杂的布局。
基本的布局如下图所示:
file:///C:/Users/andyli/AppData/Local/Temp/msohtmlclip1/01/clip_image016.jpg
这种布局需要在行和列两个方向上保持一致,所以使用CSS Grid实现整体布局十分有效。
规划对于布局的实现来说,十分重要。
接下来看看代码如何一步步实现。首先display: grid;是基本设置,其次内容块之间的间距,可以通过grid-column-gap 和 grid-row-gap实现。
  1. .container {
  2. display: grid;
  3. grid-template-columns: 0.4fr 0.3fr 0.3fr;
  4. grid-column-gap: 10px;
  5. grid-row-gap: 15px;
  6. }
复制代码
列和行布局
Header部分横跨所有的列。
  1. .header {
  2. grid-column-start: 1;
  3. grid-column-end: 4;
  4. grid-row-start: 1;
  5. grid-row-end: 2;
  6. background-color: #d5c9e2;
  7. }
复制代码

也可以使用简写,起始值和结束值位于同一行上,并用斜杠分隔。就像这样:
  1. .header {
  2. grid-column: 1 / 4;
  3. grid-row: 1 / 2;
  4. background-color: #55d4eb;
  5. }
复制代码
完成网格布局的构建之后,微调内容就是下一步。

导航
Flexbox非常适合放置header元素。基本的header布局需要设置justify-content: space-between。
上面的CSS Grid 布局示例中,需要在导航栏设置justify-self:start;,在按钮设置justify-self: end;,但是如果使用Flexbox,导航的间距会变得很容易设置。
  1. .header {
  2.   grid-column:1 / 4;
  3. grid-row: 1 / 2;
  4. color: #9f9c9c;
  5. text-transform: uppercase;
  6. border-bottom: 2px solid #b0e0ea;
  7. padding: 20px 0;
  8. display: flex;
  9. justify-content: space-between;
  10. align-items: center;
  11. }
复制代码

列内容网格
将所需的元素排列在一个方向上,意味所有元素都处在同一横向维度,通常Flexbox是实现这种布局的更好选择。此外,Flexbox可以动态调整元素。使用Flexbox,可以将所有元素连成一条直线,这也确保了所有元素都具有相同的高度。

带有文本和按钮的行内容
下图是包含了“额外”文本和按钮的三个区域。Flexbox可以轻松设置三列的宽度。
  1. .extra {
  2. grid-column: 2 / 4;
  3. grid-row: 4 / 5;
  4. padding: 1rem;
  5. display: flex;
  6. flex-wrap: wrap;
  7. border: 1px solid #ececec;
  8. justify-content: space-between;
  9. }
复制代码


设计方法总结
以上的布局设计中,使用了CSS Grid来进行整体布局(以及设计中的非线性部分)。对于网格内容区域的设计,使用Flexbox进行样式的排序和微调会更容易实现。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。
回复

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

欢迎关注葡萄城控件

小黑屋|手机版|Archiver|葡萄城控件官网 ( 沪ICP备05020274号

GMT+8, 2017-12-15 04:35 , Processed in 1.134809 second(s), 32 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表