青训营笔记 | 使用弹性盒子模型构建经典WEB布局

Jannik
290 阅读10分钟

一、弹性盒子模型简介

弹性盒子模型（Flexbox）是一种用于在 CSS 中创建灵活布局的模块。它通过定义容器（flex container）和容器内的项目（flex items），让我们可以轻松地控制元素的排列方向、对齐方式和伸缩比例等。其主要属性包括：

（一）容器属性

  1. display: flex;
    这是将一个元素定义为弹性容器的关键。一旦设置，容器内的子元素就成为了弹性项目。例如：
 .container { display: flex; }
  1. flex-direction
    用于指定弹性项目在容器中的排列方向，可取值有 row（水平从左到右，默认值）、row - reverse（水平从右到左）、column（垂直从上到下）、column - reverse（垂直从下到上）。如：
.container {
  flex-direction: column;
}
  1. justify-content
    控制弹性项目在主轴（由 flex - direction 定义）上的对齐方式。常见的值有 flex - start（起始端对齐）、flex - end（末尾端对齐）、center（居中对齐）、space - between（两端对齐，项目之间等距）、space-around（每个项目两侧等距）。比如：
    .container { justify-content: space-between; }
  1. align-items
    定义弹性项目在交叉轴（与主轴垂直的轴）上的对齐方式。值有 stretch（默认，拉伸以填满容器高度或宽度）、flex-start、flex-end、center、baseline（以项目的第一行文字基线对齐）。示例：
   .container { align-items: center; }

（二）项目属性

  1. flex-grow
    定义项目的放大比例。如果所有项目的 flex - grow 属性都为 1，则它们将等分剩余空间。若一个项目的 flex-grow 为 2，其他项目为 1，则前者占据的剩余空间将是其他项目的两倍。例如：
.item {
  flex-grow: 1;
}
  1. flex-shrink
    指定项目的缩小比例。默认值为 1，表示空间不足时项目会收缩。若设置为 0，则项目不会收缩。比如：
.item {
  flex-shrink: 0;
}
  1. flex-basis
    设置项目在分配多余空间之前的初始大小。可以是长度值（如 200px）或百分比。例如：
.item {
  flex - basis: 30%;
}

二、10 种经典 WEB 布局示例

（一）垂直居中布局（单个元素在父容器中垂直居中）

  1. HTML 结构
<div class="parent-container">
  <div class="centered-item">Centered Content</div>
</div>
  1. CSS 样式
.parent-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background-color: lightgray;
}

.centered-item {
  background-color: blue;
  color: white;
  padding: 20px;
}

（二）等高布局

一、什么是等高布局

等高布局是指在一个布局结构中，不管每个栏目的内容多少，它们的高度始终保持相等。这种布局在网页设计中可以使页面看起来更加整齐、美观，提升用户体验。

  1. HTML 结构
<div class="container">
    <div class="column1">
        <p>这是第一列的内容，内容可能有多有少。</p>
    </div>
    <div class="column2">
        <p>这是第二列的内容，内容可能与第一列不同。</p>
        <p>添加更多内容来测试等高效果。</p>
    </div>
</div>
  1. CSS 样式
.container {
    display: flex;
}
.column1,
.column2 {
    flex: 1;
    padding: 20px;
    background-color: lightblue;
    border: 1px solid #ccc;
}

（三）均分列（等分列）布局

一、什么是均分列（等分列）布局

均分列（等分列）布局是一种网页布局方式，主要用于将一个容器内的空间均匀地划分给多个列元素。这意味着每个列元素在宽度（水平方向）或高度（垂直方向）上占据相同的比例，从而实现一种整齐、对称的视觉效果。

（一）使用 Flexbox 实现均分列布局

  1. 水平均分列布局
    • HTML 结构示例
      • 假设有一个容器，里面包含三个列元素，用于展示不同的内容。
<div class="flex-container">
    <div class="column">
        <p>第一列内容</p>
    </div>
    <div class="column">
        <p>第二列内容</p>
    </div>
    <div class="column">
        <p>第三列内容</p>
    </div>
</div>
  • CSS 样式
    • 首先将容器设置为display: flex，使其成为一个弹性容器。然后通过将每个列元素（.column）的flex属性设置为1，可以实现水平方向的均分列布局。这是因为flex属性是flex - grow、flex - shrink和flex - basis的缩写。当flex - grow为1时，表示该元素在有剩余空间时会自动增长，并且由于每个列的flex - grow都相同，所以它们会均分剩余空间。
.flex-container {
     display: flex;
 }
.column {
     flex: 1;
     padding: 20px;
     background-color: lightblue;
     border: 1px solid #ccc;
 }

  1. 垂直均分列布局

    • HTML 结构示例

      • 同样假设有一个容器和三个列元素，但这次要实现垂直方向的均分。
<div class="vertical-flex-container">
    <div class="column">
        <p>第一列内容</p>
    </div>
    <div class="column">
        <p>第二列内容</p>
    </div>
    <div class="column">
        <p>第三列内容</p>
    </div>
</div>

  • CSS 样式

    • 将容器设置为display: flex，并将flex - direction属性设置为column，这样就改变了主轴方向为垂直方向。然后同样将每个列元素的flex属性设置为1，即可实现垂直方向的均分列布局。
.vertical-flex-container {
    display: flex;
    flex-direction: column;
}
.column {
    flex: 1;
    padding: 20px;
    background-color: lightgreen;
    border: 1px solid #ccc;
}

（四）圣杯布局

一、什么是圣杯布局

圣杯布局是一种经典的三列布局方式，主要用于网页设计中。它的名字来源于传说中的圣杯，寓意着这种布局方式就像圣杯一样珍贵且实用。这种布局通常包括一个头部（header）、一个底部（footer）以及中间的三列内容区域，其中中间列是主要内容区域，左右两列是辅助内容区域（如导航栏或广告栏）。它的特点是能够在保证中间主要内容优先加载和显示的同时，让左右两侧的列固定宽度，并将主要内容区域设置为自适应宽度，从而在不同屏幕尺寸下都能保持较好的布局效果。

二、圣杯布局的 HTML 结构

<body>
    <header>
        头部内容
    </header>
    <div class="container">
        <div class="main">
            主要内容
        </div>
        <div class="left-sidebar">
            左侧边栏内容
        </div>
        <div class="right-sidebar">
            右侧边栏内容
        </div>
    </div>
    <footer>
        底部内容
    </footer>
</body>

三、CSS 样式实现圣杯布局

  1. 首先，对整体页面布局进行一些基本的样式设置，包括清除浏览器默认的边距和填充，设置字体等。
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans - serif;
}
header,
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}
  1. 将.container设置为相对定位，这是为了给内部的绝对定位元素提供定位参考。同时，设置padding值，为左右侧边栏留出空间。
.container {
      position: relative;
      padding-left: 200px; /* 左侧边栏宽度 */
      padding-right: 300px; /* 右侧边栏宽度 */
  }
  1. 中间列（.main）是自适应宽度的，需要设置width: 100%，使其占满容器的宽度。同时，通过float: left让它浮动起来，并且为了避免被左右侧边栏覆盖，设置box-sizing: border-box，这样边框和内边距就不会增加元素的宽度。
.main {
      width: 100%;
      float: left;
      box-sizing: border - box;
      background-color: #f0f0f0;
      padding: 20px;
  }

4.左侧边栏（.left-sidebar）设置为固定宽度，通过position: absolute将其定位在容器的左侧，并且设置left属性来控制其位置。

.left-sidebar {
      width: 200px;
      position: absolute;
      left: 0;
      background-color: #ccc;
      padding: 20px;
  }

5.右侧边栏（.right-sidebar）同样设置为固定宽度，通过position: absolute定位在容器的右侧，设置right属性来确定位置。

.right-sidebar {
      width: 300px;
      position: absolute;
      right: 0;
      background - color: #ccc;
      padding: 20px;
  }

（五）Sticky Footer 布局

什么是Sticky Footer 布局

Sticky Footer 布局是一种网页设计布局方式，其核心特点是让页脚（footer）“粘” 在浏览器窗口的底部。无论页面内容是较少（页面高度小于浏览器窗口高度）还是较多（页面高度大于浏览器窗口高度），页脚始终保持在视口底部可见的位置。当内容较少时，页脚位于浏览器窗口底部；当内容较多时，页脚紧跟在内容之后。

HTML结构示例

<div class="page-wrapper">
    <div class="content">
        这里是页面的主要内容。可以是文章、产品列表等各种内容。
    </div>
    <div class="footer">
        这是页脚部分，包含版权信息、联系方式等。
    </div>
</div>

CSS样式

.page-wrapper {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
  }
.content {
      flex: 1;
  }
  
.footer {
      background-color: #333;
      color: white;
      padding: 20px;
  }

（六）百分百无滚动布局

什么是百分百无滚动布局布局

百分百无滚动布局是指页面内容在浏览器视口（viewport）内完全展示，不需要用户进行滚动操作来查看所有内容。这种布局方式可以让用户在不滚动屏幕的情况下获取所有关键信息，适用于一些内容相对简洁或者重点突出的页面，如简单的单页营销网站、小型应用的引导页等。

二、实现方式

（一）基于视口单位（vh 和 vw）的布局

  1. 视口单位介绍
    • vh（viewport height） ：表示视口高度的 1%。例如，100vh代表整个浏览器视口的高度。
    • vw（viewport width） ：表示视口宽度的 1%。例如，100vw代表整个浏览器视口的宽度。
  2. HTML 结构示例
    • 假设有一个简单的页面，包含一个头部（header）、一个主要内容区域（content）和一个底部（footer）。
<div class="page">
    <div class="header">头部内容</div>
    <div class="content">主要内容</div>
    <div class="footer">底部内容</div>
</div>
  1. CSS 样式
    • 为了实现无滚动布局，我们可以将.page的高度设置为100vh，使其填满整个视口高度。然后根据设计需求，按比例分配头部、主要内容和底部的高度。例如，将头部设置为20vh，主要内容设置为60vh，底部设置为20vh。
.page {
       height: 100vh;
       display: flex;
       flex - direction: column;
   }
.header {
       height: 20vh;
       background - color: #333;
       color: white;
       text - align: center;
       padding - top: 10px;
   }
.content {
       height: 60vh;
       background - color: #f0f0f0;
       display: flex;
       justify - content: center;
       align - items: center;
   }
.footer {
       height: 20vh;
       background - color: #ccc;
       text - align: center;
       padding - bottom: 10px;
   }

（七）12列网格布局

（二）使用 Flexbox 实现类似 12 列网格布局效果

  1. HTML 结构
<div class="flex - container">
    <header class="header - flex">头部</header>
    <div class="main - content - flex">
        <div class="flex - item">子元素1</div>
        <div class="flex - item">子元素2</div>
        <div class="flex - item">子元素3</div>
        // 可以添加更多子元素
    </div>
    <footer class="footer - flex">底部</footer>
</div>
  1. CSS 样式
    • 将.flex - container设置为display: flex，使其成为一个弹性容器。为了模拟 12 列网格，我们可以将每个子元素（.flex - item）的flex - basis属性设置为一个基于百分比的值。例如，如果每个子元素要占据 1 列的宽度，flex - basis可以设置为calc(100% / 12)。
.flex-container {
       display: flex;
       flex - wrap: wrap;
       /* 子元素之间的间距 */
       gap: 20px; 
 }
.header-flex {
       width: 100%;
       background - color: #333;
       color: white;
       text - align: center;
       padding: 10px;
 }
.footer-flex {
       width: 100%;
       background-color: #ccc;
       color: white;
       text-align: center;
       padding: 10px;
   }
.main-content - flex {
       width: 100%;
   }
.flex-item {
       flex-basis: calc(100% / 12);
       background-color: #f0f0f0;
       padding: 20px;
       text-align: center;
 }
  • 通过flex-wrap: wrap属性，当子元素的总宽度超过容器宽度时，它们会自动换行。这样就可以模拟出类似 12 列网格的布局效果，不过在一些细节上（如精确的列对齐和布局控制）可能不如 CSS Grid 灵活。

（八）九宫格布局

（二）使用 Flexbox 实现九宫格布局

  1. HTML 结构
    • 依然是包含九个.grid-item的.grid-container。
<div class="flex-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>
  1. CSS 样式
    • 将.flex-container设置为display: flex，并将flex-wrap: wrap设置为使子元素能够换行。然后计算每个.grid-item的宽度和高度，使其能够形成九宫格。假设容器的宽度为100%，为了形成九宫格，每个.grid-item的宽度可以设置为calc((100% - 2 * 10px) / 3)（这里减去了两侧的间距），高度可以设置为相同的值。
.flex-container {
     display: flex;
     flex - wrap: wrap;
     justify - content: space - between;
     gap: 10px; /* 九宫格之间的间距 */
 }
.grid-item {
     width: calc((100% - 2 * 10px) / 3);
     height: calc((100% - 2 * 10px) / 3);
     background-color: lightgreen;
     display: flex;
     justify-ontent: center;
     align-items: center;
     font-size: 20px;
 }
  • 这种方法通过计算每个格子的尺寸来实现九宫格布局，在灵活性上可能稍逊一筹，尤其是在处理不同屏幕尺寸和复杂的间距要求时，不如 CSS Grid 方式直观和方便。
avatar
文章
阅读
粉丝