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

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的方便之处在于，可以指定模板区域，这也使得定义布局变得非常直观。采取这种方法，网格上的区域可以命名并引用位置项。对于这个基本布局，我们需要命名四个项目：

&#216;  header

&#216;  main content

&#216;  sidebar

&#216;  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进行样式的排序和微调会更容易实现。

原文链接：https://getflywheel.com/layout/c ... for-layouts-how-to/