网页设计基础二十讲：从零开始掌握Flex布局：打造响应式导航栏与书籍列表随着Web前端技术的发展，响应式设计已成为网

随着Web前端技术的发展，响应式设计已成为网站开发中的重要组成部分。Flex布局因其强大的灵活性和易用性，在实现响应式设计方面表现尤为突出。本文将通过一个实际案例——创建一个响应式的导航栏和书籍列表，带你一步步了解并掌握Flex布局的核心概念和使用技巧。

知识回顾

Flex布局

flex布局的四大概念： : 容器，项目，主轴，交叉轴

容器：如果在一个盒子上面，设置display:flex，那么这个盒子就是一个容器
项目：容器的直接子元素，叫项目
主轴：在容器中，项目默认是按主轴方向排列，默认是从左向右排列
交叉轴：与主轴垂直的那个轴

flex容器属性

flex-direction（子元素排列顺序）

flex-direction:属性规定灵活项目的排列方向（主轴方向）:

row:默认值,灵活的项目将水平显示。
row-reverse:与row相同，但是以相反的顺序。
column:灵活的项目将垂直显示。
column-reverse:与column相同，但是以相反的顺序。

2. flex-wrap（换行）:用于设置伸缩项目在主轴上的换行方式:

nowrap:默认值。规定灵活的项目不拆行或不拆列。
wrap:规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse:规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

3. flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;-简化代码 4. justify-content（主轴对齐方式）

justify-content：用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式:

flex-start:默认值。项目位于容器的开头。	
flex-end:项目位于容器的结尾。	
center:项目位于容器的中心。	
space-between:项目位于各行之间留有空白的容器内。
space-around:项目位于各行之前、之间、之后都留有空白的容器内。

6. align-items（侧轴对齐方式）

align-items:定义flex子项目在flex容器的侧轴（纵轴）方向上的对齐方式:

stretch:默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
center:元素位于容器的中心。
flex-start:元素位于容器的开头。
flex-end:元素位于容器的结尾。
baseline:元素位于容器的基线上。

7.align-content（横向排列换行后多行文本y轴对齐方式）

stretch:默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。
如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
center:元素位于容器的中心。
flex-start:元素位于容器的开头。
flex-end:元素位于容器的结尾。
space-between:元素位于各行之间留有空白的容器内。
space-around:元素位于各行之前、之间、之后都留有空白的容器内。
说明：
   align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用

flex子元素属性

1.align-self属性（单个元素侧轴对齐方式）

注意：align-self 属性可重写灵活容器的 align-items 属性。
auto:默认值。元素继承了它的父容器的align-items属性。如果没有父容器则为 "stretch"。	
stretch:元素被拉伸以适应容器。
center:元素位于容器的中心。
flex-start:元素位于容器的开头。
flex-end:元素位于容器的结尾。
baseline:元素位于容器的基线上。

2.flex-grow扩展比率

flex-grow：用于设置或检索弹性盒子项目的扩展比率；      
number:规定项目将相对于其他灵活的项目进行扩展的量。默认值是0。
即当容器空间大于内部元素空间之和时，剩余部分将根据各元素指定的flex-grow按比例分配，使各子元素增大；默认值为0，表示剩余空间不分配。

3.flex-shrink：设置弹性盒的伸缩项目的收缩比率

number:规定项目将相对于其他灵活的项目进行收缩的量。默认值是1收缩，0为不收缩。
Flex子元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值；默认值为1，表示溢出时等比例缩小；

算法-公式：
超出空间的像素数：1000-(900+200)=-100px; 
加权总和：=(第一个子元素的宽度)*(shrink)+（第二个子元素的宽度）*   (shrink)+....; 
    A收缩的像素数：(Awidth*shrink)/加权综合)*超出空间 =收缩的像素数

4.flex-basis:设置弹性盒伸缩基准值（指定flex-item在主轴上的初始大小）

number:规定灵活项目的初始长度。
auto：默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。

5.order：属性设置或检索弹性盒模型对象的子元素出现的順序

number：值越小排列越靠前，值越大顺序越靠后

6.flex属性简写

（1）flex 属性用于设置弹性盒模型对象的子元素如何分配父元素的空间。
（2）flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

auto = 0 1 auto
none = 0 0 auto
  1  = 1 1 auto

任务描述

设计要求

导航栏：
- 采用响应式设计，确保在不同屏幕尺寸下都能正常显示。
- 包含 logo 和链接菜单，包括“首页”、“书籍”、“关于我们”和“联系我们”。
- 使用 flex 布局，使导航项在小屏幕上能够垂直排列。
书籍列表：
- 使用响应式设计，使书籍列表在大屏幕上每行显示四本书。
- 每本书的展示包括：
  - 书籍封面图片。
  - 书籍标题。
  - 简短介绍文本，描述书籍内容。
  - 书籍价格信息。
- 使用 flex 布局，使书籍项在容器中水平排列并在行满时换行。
书籍项样式：
- 每本书的宽度设置为 23%，以实现每行四本书的效果，并留出适当间距。
- 在书籍项上添加阴影效果，以增强立体感。
- 鼠标悬停时，书籍图片放大，书籍项整体轻微向上移动，提升交互体验。
响应式布局：
- 在屏幕宽度小于768px时，书籍项宽度调整为 45%，以适应小屏幕设备（如平板）。
- 在屏幕宽度小于480px时，书籍项宽度调整为 100%，确保每本书占满一整行，便于在移动设备上阅读和操作。

任务实施

步骤 1: 创建基础HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线书店</title>
  <link rel="stylesheet" href="style.css"> <!-- 引入CSS样式 -->
</head>
<body>
  <header class="navbar">
    <div class="logo">在线书店</div>
    <nav>
      <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#books">书籍</a></li>
        <li><a href="#about">关于我们</a></li>
        <li><a href="#contact">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="book-list">
      <!-- 书籍项将会在这里 -->
    </section>
  </main>
</body>
</html>

步骤 2: 创建书籍项的HTML结构

在 <section class="book-list"> 中添加多个书籍项。

<section class="book-list">
  <div class="book-item">
    <img src="img/1.png" alt="宇宙">
    <h3>宇宙</h3>
    <p>宇宙》由科学家卡尔·萨根所著，是一本天文科普读物。</p>
    <div class="book-price">价格：¥99.00</div>
  </div>
  <div class="book-item">
    <img src="img/2.png" alt="虚拟现实案例教程">
    <h3>虚拟现实案例教程</h3>
    <p>适合虚拟现实爱好者的入门书籍。</p>
    <div class="book-price">价格：¥89.00</div>
  </div>
  <!-- 添加其他书籍项 -->
</section>

步骤 3: 添加CSS样式

在 style.css 中，设置基本样式和响应式布局：

/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  font-family: Arial, sans-serif;
}

/* 导航栏样式 */
.navbar {
  background-color: #333;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.navbar ul {
  list-style-type: none;
  display: flex;
}

.navbar ul li {
  margin-left: 20px;
}

.navbar ul li a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  transition: background-color 0.3s ease;
}

.navbar ul li a:hover {
  background-color: yellowgreen;
}

/* 书籍列表样式 */
.book-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

.book-item {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  width: 23%; /* 每行显示四本书 */
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.book-item:hover {
  transform: translateY(-5px); /* 鼠标悬停时上移 */
}

.book-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.book-item:hover img {
  transform: scale(1.1); /* 鼠标悬停时放大 */
}

.book-price {
  font-size: 16px;
  font-weight: bold;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .book-item {
    width: 45%; /* 在小屏幕上调整为两本书一行 */
  }
}

@media screen and (max-width: 480px) {
  .book-item {
    width: 100%; /* 移动设备上每本书占满一行 */
  }
}

步骤 4: 测试与调整

在不同尺寸的设备上打开网页，确认书籍是否按要求一行显示四本.
检查导航栏是否正常工作，确保鼠标悬停效果良好。
调整样式以确保美观和一致性。

步骤 5: 完成与优化

根据用户反馈和测试结果进行最后的调整。
确保所有图片和文本内容清晰可读，确保用户体验良好。
如果需要，可以在HTML中添加更多书籍项，保持样式和布局的一致。

实验实训

待补充设计

通过本案例的学习，你不仅掌握了Flex布局的基础知识，还学会了如何结合媒体查询来实现响应式设计。这只是一个简单的例子，实际上Flex布局可以解决更多复杂的布局问题，希望你能在此基础上继续探索，创造出更加丰富多样的网页布局。

网页设计基础二十讲： 从零开始掌握Flex布局：打造响应式导航栏与书籍列表