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

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.         
    4. 
  
  
  
  
  4.           
      
  
  
  
  
    •             
    • 
  
  
  
  
    •             
    • 
  
  
  
  
    •             
    • 
  
  
  
  
    •           
    5. 
  
  
  
  
  5.         
    6. 
  
  
  
  
  6.         
    7. 
  
  
  
  
  7.     
    8. 
  
  
  
  
  8.     
    9. 
  
  
  
  
  9.         
    10. 
  
  
  
  
  10.             
    11. 
  
  
  
  
  11.         
    12. 
  
  
  
  
  12.         
    13. 
  
  
  
  
  13.             
    14. 
  
  
  
  
  14.             
    15. 
  
  
  
  
  15.         
    16. 
  
  
  
  
  16.     
  •     
  •         

  •         

  •     
  •  

    使用 Flexbox 创建布局

    Header 样式

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

     
 
 
 
      
  
  
  
  
    1. .container {
      2. 
  
  
  
  
    2.     display: flex;
      3. 
  
  
  
  
    3.     flex-direction: column;
      4. 
  
  
  
  
    4. } 
      5.

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

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

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

    代码如下:

     
 
 
 
      
  
  
  
  
    1. header{
      2. 
  
  
  
  
    2.     padding: 15px;
      3. 
  
  
  
  
    3.     margin-bottom: 40px;
      4. 
  
  
  
  
    4.     display: flex;
      5. 
  
  
  
  
    5.     justify-content: space-between;
      6. 
  
  
  
  
    6. }
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8. header nav ul {
      9. 
  
  
  
  
    9.     display: flex;
      10. 
  
  
  
  
    10.     align-items: baseline;
      11. 
  
  
  
  
    11.     list-style-type: none;
      12. 
  
  
  
  
    12. } 
      13.

    页面内容样式

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

     
 
 
 
      
  
  
  
  
    1. .wrapper {
      2. 
  
  
  
  
    2.     display: flex;
      3. 
  
  
  
  
    3.     flex-direction: row;
      4. 
  
  
  
  
    4. }
      5.

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

     
 
 
 
      
  
  
  
  
    1. .main {
      2. 
  
  
  
  
    2.     flex: 3;
      3. 
  
  
  
  
    3.     margin-right: 60px;
      4. 
  
  
  
  
    4. }
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. .sidebar {
      7. 
  
  
  
  
    7.    flex: 1;
      8. 
  
  
  
  
    8. } 
      9.

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

    使用 CSS Grid 创建布局

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

    Grid 模板区域

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

    基本 HTML 结构

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.     
      3. 
  
  
  
  
    3.         
      4. 
  
  
  
  
    4.           
        
  
  
  
  
      •             
      • 
  
  
  
  
      •             
      • 
  
  
  
  
      •             
      • 
  
  
  
  
      •           
      5. 
  
  
  
  
    5.         
      6. 
  
  
  
  
    6.         
      7. 
  
  
  
  
    7.     
      8. 
  
  
  
  
    8.    
      9. 
  
  
  
  
    9.     
      10. 
  
  
  
  
    10.         
      11. 
  
  
  
  
    11.         
        
  
  
  
  
      •             
      • 
  
  
  
  
      •             
      • 
  
  
  
  
      •    　　　　　 
      • 
  
  
  
  
      •     　　　　　
      • 
  
  
  
  
      •    　　　　　 
      • 
  
  
  
  
      •         
      12. 
  
  
  
  
    12.     
      13. 
  
  
  
  
    13.  
      14. 
  
  
  
  
    14.     
      15. 
  
  
  
  
    15.         
      16. 
  
  
  
  
    16.         
      17. 
  
  
  
  
    17.         
       
      18. 
  
  
  
  
    18.     
      19. 
  
  
  
  
    19.  
      20. 
  
  
  
  
    20.     
      21. 
  
  
  
  
    21.         
      22. 
  
  
  
  
    22.         
      23. 
  
  
  
  
    23.     
      24.
     

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

    grid-template-areas:

    “header header”

    “sidebar main”

    “footer footer”;

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

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

     
 
 
 
      
  
  
  
  
    1. header{
      2. 
  
  
  
  
    2.     grid-area: header;
      3. 
  
  
  
  
    3.     padding: 20px 0;
      4. 
  
  
  
  
    4.     display: grid;
      5. 
  
  
  
  
    5.     grid-template-columns: 1fr 1fr;
      6. 
  
  
  
  
    6. } 
      7.

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

     
 
 
 
      
  
  
  
  
    1. .container{
      2. 
  
  
  
  
    2.     max-width: 900px;
      3. 
  
  
  
  
    3.     background-color: #fff;
      4. 
  
  
  
  
    4.     margin: 0 auto;
      5. 
  
  
  
  
    5.     padding: 0 60px;
      6. 
  
  
  
  
    6.     display: grid;
      7. 
  
  
  
  
    7.     grid-template-columns: 1fr 3fr;
      8. 
  
  
  
  
    8.     grid-template-areas:
      9. 
  
  
  
  
    9.         "header header"
      10. 
  
  
  
  
    10.         "sidebar main"
      11. 
  
  
  
  
    11.         "footer footer";
      12. 
  
  
  
  
    12.     grid-gap: 50px;
      13. 
  
  
  
  
    13. } 
      14.

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

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

     
 
 
 
      
  
  
  
  
    1. header{
      2. 
  
  
  
  
    2.     grid-area: header;
      3. 
  
  
  
  
    3.     display: grid;
      4. 
  
  
  
  
    4.     grid-template-columns: 1fr 1fr;
      5. 
  
  
  
  
    5. } 
      6.

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

     
 
 
 
      
  
  
  
  
    1. header button {
      2. 
  
  
  
  
    2.     justify-self: end;
      3. 
  
  
  
  
    3. } 
      4.

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

     
 
 
 
      
  
  
  
  
    1. header nav {
      2. 
  
  
  
  
    2. 
  
  
  
  
    3.     justify-self: start;
      4. 
  
  
  
  
    4. 
  
  
  
  
    5. } 
      6.

    使用 Flexbox 和 CSS Grid 创建布局

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

    基本的布局如下图所示：

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

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

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

     
 
 
 
      
  
  
  
  
    1. .container {
      2. 
  
  
  
  
    2.   display: grid;
      3. 
  
  
  
  
    3.   grid-template-columns: 0.4fr 0.3fr 0.3fr;
      4. 
  
  
  
  
    4.   grid-column-gap: 10px;
      5. 
  
  
  
  
    5.   grid-row-gap: 15px;
      6. 
  
  
  
  
    6. } 
      7.

    列和行布局

    Header 部分横跨所有的列。

     
 
 
 
      
  
  
  
  
    1. .header {
      2. 
  
  
  
  
    2.   grid-column-start: 1;
      3. 
  
  
  
  
    3.   grid-column-end: 4;
      4. 
  
  
  
  
    4.   grid-row-start: 1;
      5. 
  
  
  
  
    5.   grid-row-end: 2;
      6. 
  
  
  
  
    6.   background-color: #d5c9e2;
      7. 
  
  
  
  
    7. }
      8.

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

     
 
 
 
      
  
  
  
  
    1. .header {
      2. 
  
  
  
  
    2.   grid-column: 1 / 4;
      3. 
  
  
  
  
    3.   grid-row: 1 / 2;
      4. 
  
  
  
  
    4.   background-color: #55d4eb;
      5. 
  
  
  
  
    5. } 
      6.

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

    导航

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

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

     
 
 
 
      
  
  
  
  
    1. .header {
      2. 
  
  
  
  
    2.   grid-column: 1 / 4;
      3. 
  
  
  
  
    3.   grid-row: 1 / 2;
      4. 
  
  
  
  
    4.   color: #9f9c9c;
      5. 
  
  
  
  
    5.   text-transform: uppercase;
      6. 
  
  
  
  
    6.   border-bottom: 2px solid #b0e0ea;
      7. 
  
  
  
  
    7.   padding: 20px 0;
      8. 
  
  
  
  
    8.   display: flex;
      9. 
  
  
  
  
    9.   justify-content: space-between;
      10. 
  
  
  
  
    10.   align-items: center;
      11. 
  
  
  
  
    11. } 
      12.

    列内容网格

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

    带有文本和按钮的行内容

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

     
 
 
 
      
  
  
  
  
    1. .extra {
      2. 
  
  
  
  
    2.   grid-column: 2 / 4;
      3. 
  
  
  
  
    3.   grid-row: 4 / 5;
      4. 
  
  
  
  
    4.   padding: 1rem;
      5. 
  
  
  
  
    5.   display: flex;
      6. 
  
  
  
  
    6.   flex-wrap: wrap;
      7. 
  
  
  
  
    7.   border: 1px solid #ececec;
      8. 
  
  
  
  
    8.   justify-content: space-between;
      9. 
  
  
  
  
    9. }
      10.

    设计方法总结

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

    文章题目：如何使用Flexbox和CSSGrid，实现高效布局
    URL网址：http://www.shufengxianlan.com/qtweb/news3/259003.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    搜索引擎优化知识

    同城分类信息

    盐亭网站制作公司　　 　微信公众号开发　　 　网站设计公司　　 　成都服务器租赁　　 　亚克力背部发光字　　 　广汉锦华　　 　四川电信机房托管　　 　南充网站建设　　 　联通机柜租用　　 　电信机房托管　　 　网站建设公司　　 　成都网站建设　　 　成都托管服务器　　 　专业网站建设　　 　产品包装设计　　 　成都网络营销　　 　郫县门窗定制　　 　专业网站设计　　 　云主机　　 　泸州做网站