如何使用 Flexbox 和 CSS Grid,实现高效布局

转载 2018年04月15日 00:00:00

(点击上方公众号,可快速关注)


来源:葡萄城控件

www.cnblogs.com/powertoolsteam/p/combine-flexbox-and-css-grids-for-layouts.html


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 结构


<div class="container">

    <header>

        <nav>

          <ul>

            <li></li>

            <li></li>

            <li></li>

          </ul>

        </nav>

        <button></button>

    </header>

    <div class="wrapper">

        <aside class="sidebar">

            <h3></h3>

        </aside>

        <section class="main">

            <h2></h2>

            <p></p>

        </section>

    </div><!-- /wrapper -->

    <footer>

        <h3></h3>

        <p></p>

    </footer>

</div><! -- /container -->


使用 Flexbox 创建布局


Header 样式


我们从外到内,逐层开始设计,首先将 display: flex; 添加到 container,这也是所有 Flexbox 布局的第一步。接着,将 flex-direction 设置为 column,确保所有部分彼此相对。


.container {

    displayflex;

    flex-directioncolumn;

}


通过 display: flex; 自动创建一个全宽的 header(header 默认情况下是块级元素)。通过这个声明,导航元素的放置会变得很容易。


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


在导航中,使用 align-items: baseline; 能够实现所有导航项目与文本基线的对齐,这样也使得导航栏看起来更加统一。



代码如下:


header{

    padding15px;

    margin-bottom40px;

    displayflex;

    justify-contentspace-between;

}

 

header nav ul {

    displayflex;

    align-itemsbaseline;

    list-style-typenone;

}


页面内容样式


接下来,将侧边栏和主内容区域使用一个 wrapper 包含起来。具有 .wrapper 类的 div,也需要设置 display: flex; 但是 flex 方向与上述不同。这是因为侧边栏和主内容区域彼此相邻而不是堆叠。


.wrapper {

    displayflex;

    flex-directionrow;

}



主内容区域和侧边栏的大小设置非常重要,因为重要的信息都在这里展示。主内容区域应该是侧边栏大小的三倍,使用 Flexbox 很容易实现这点。


.main {

    flex3;

    margin-right60px;

}

 

.sidebar {

   flex1;

}


总的来说,Flexbox 在创建这个简单的布局时,十分高效。尤其在控制列表元素样式和设置导航与按钮之间的间距方面,特别有用。


使用 CSS Grid 创建布局


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



Grid 模板区域


CSS Grid 的方便之处在于,可以指定模板区域,这也使得定义布局变得非常直观。采取这种方法,网格上的区域可以命名并引用位置项。对于这个基本布局,我们需要命名四个项目:


  • header

  • main content

  • sidebar

  • footer


基本 HTML 结构


<div class="container">

    <header>

        <nav>

          <ul>

            <li></li>

            <li></li>

            <li></li>

          </ul>

        </nav>

        <button></button>

    </header>

   

    <aside class="sidebar">

        <h3></h3>

        <ul>

            <li></li>

            <li></li>

         <li></li>

         <li></li>

         <li></li>

        </ul>

    </aside>

 

    <section class="main">

        <h2></h2>

        <p></p>

        <p> </p>

    </section>

 

    <footer>

        <h3></h3>

        <p></p>

    </footer>

</div>


我们按照顺序在 grid container 中定义这些区域,就像绘制它们一样。


grid-template-areas:


“header header”


“sidebar main”


“footer footer”;


当前侧边栏位于左侧,主区域内容位于右侧,如果需要,也可以轻松更改顺序。


有一件事要注意:这些名字需要“连接”到样式上。所以需要在 header block 中,添加 grid-area: header;。


header{

    grid-areaheader;

    padding20px 0;

    displaygrid;

    grid-template-columns1fr 1fr;

}


HTML 结构与 Flexbox 示例中的相同,但 CSS 与创建网格布局完全不同。


.container{

    max-width900px;

    background-color#fff;

    margin0 auto;

    padding0 60px;

    displaygrid;

    grid-template-columns1fr 3fr;

    grid-template-areas:

        "header header"

        "sidebar main"

        "footer footer";

    grid-gap50px;

}


使用 CSS Grid 布局时,在 container 中设置 display: grid; 非常重要。此处声明 grid-template-columns,是为了确保页面的整体结构。这里 grid-template-column 已将侧边栏和主内容区域大小设置为 1fr 和 3fr。fr 是网格的分数单位。



接下来,需要调整 header 容器中的 fr 单元。将 grid-template-columns 设置为 1fr 和 1fr。这样 header 中就有两个相同大小的列,放置导航项和按钮会很合适。


header{

    grid-areaheader;

    displaygrid;

    grid-template-columns1fr 1fr;

}



要放置按钮,我们只需要将 justify-self 设置为 end。


header button {

    justify-selfend;

}


导航的位置按照以下方式设置:


header nav {

    justify-selfstart;

}


使用 Flexbox 和 CSS Grid 创建布局


最后,我们通过组合 Flexbox 和 CSS Grid 来创建更复杂的布局。



基本的布局如下图所示:



这种布局需要在行和列两个方向上保持一致,所以使用 CSS Grid 实现整体布局十分有效。



规划对于布局的实现来说,十分重要。


接下来看看代码如何一步步实现。首先 display: grid; 是基本设置,其次内容块之间的间距,可以通过 grid-column-gap 和 grid-row-gap 实现。


.container {

  displaygrid;

  grid-template-columns0.4fr 0.3fr 0.3fr;

  grid-column-gap10px;

  grid-row-gap15px;

}


列和行布局


Header 部分横跨所有的列。


.header {

  grid-column-start1;

  grid-column-end4;

  grid-row-start1;

  grid-row-end2;

  background-color#d5c9e2;

}


也可以使用简写,起始值和结束值位于同一行上,并用斜杠分隔。就像这样:


.header {

  grid-column1 / 4;

  grid-row1 / 2;

  background-color#55d4eb;

}


完成网格布局的构建之后,微调内容就是下一步。


导航


Flexbox 非常适合放置 header 元素。基本的 header 布局需要设置 justify-content: space-between。


上面的 CSS Grid 布局示例中,需要在导航栏设置 justify-self:start;,在按钮设置 justify-self: end;,但是如果使用 Flexbox,导航的间距会变得很容易设置。


.header {

  grid-column1 / 4;

  grid-row1 / 2;

  color#9f9c9c;

  text-transformuppercase;

  border-bottom2px solid #b0e0ea;

  padding20px 0;

  displayflex;

  justify-contentspace-between;

  align-itemscenter;

}



列内容网格


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


带有文本和按钮的行内容


下图是包含了“额外”文本和按钮的三个区域。Flexbox 可以轻松设置三列的宽度。


.extra {

  grid-column2 / 4;

  grid-row4 / 5;

  padding1rem;

  displayflex;

  flex-wrapwrap;

  border1px solid #ececec;

  justify-contentspace-between;

}



设计方法总结


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



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

如何使用Flexbox和CSS Grid,实现高效布局

在现代网页设计时代,使用Flexbox和CSS Grid来对齐元素,变得相对容易起来。
  • powertoolsteam
  • powertoolsteam
  • 2017-09-20 11:30:29
  • 1127

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

就目前为止,CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持,但对于实现布局而言,这已是一种非常完美的结合。如果CSS Box ...
  • tja8N2m2G46OMtF
  • tja8N2m2G46OMtF
  • 2018-01-09 00:00:00
  • 384

CSS3的flexbox布局

本文转自:http://yangyicode.com/ccs3-flexbox-layout/ CSS3为display属性增加了一个新值flex,于是诞生了一种新的布局方式:flexbox布...
  • ssisse
  • ssisse
  • 2016-04-25 11:10:18
  • 1401

flexbox功能、兼容、原理

http://www.imooc.com/video/6048 [Flexible boxes更加优雅的Web布局] https://philipwalton.github.io/solved-...
  • u010552788
  • u010552788
  • 2016-06-07 15:31:00
  • 776

CSS Grid布局这样玩

自从去年年半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前...
  • hj7jay
  • hj7jay
  • 2017-04-25 09:34:27
  • 3141

纯CSS实现瀑布流布局

瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了,我最早知道这个名词的时候大约是在2012年,当时Pinterest网站的布局就是使用的这种流式布局,简言之...
  • LuviaWu
  • LuviaWu
  • 2017-04-21 11:37:50
  • 8035

css的flex box布局

Flex也就是flexable box,即为“弹性布局”,为盒模型提供了最大的灵活性。 采用flex布局的元素,称之为“flex容器”(flex container),而在容器里面的元素称之为“fl...
  • youshigay
  • youshigay
  • 2015-09-11 15:26:32
  • 888

如何使用 CSS Grid 快速而又灵活的布局

CSS Grid(网格) 模块是创建网站布局一个非常棒的工具。它能使你快速地进行布局尝试,比你尝试过的任何其他布局系统都快。 在这篇文章中,我会教你如何使用 CSS Grid 进行快速布局。 ...
  • chandoudeyuyi
  • chandoudeyuyi
  • 2017-12-26 11:43:03
  • 169

flexbox布局实例

等高布局之前我们实现等高布局的方式通常是使用非常大的padding-bottom与负的margin-bottom,而使用flex也能轻松实现。由于align-items属性的默认值是stretch,也...
  • crystal6918
  • crystal6918
  • 2017-08-10 19:06:35
  • 295

css3开发:flexbox布局实例分析

上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教...
  • Generon
  • Generon
  • 2017-05-18 10:09:48
  • 519
收藏助手
不良信息举报
您举报文章:如何使用 Flexbox 和 CSS Grid,实现高效布局
举报原因:
原因补充:

(最多只允许输入30个字)