CSS Flexbox 深入探究

第 8 讲：掌握 css flexbox - 深入探讨

在本次讲座中，我们将深入探讨 css flexbox，这是一个强大的布局工具，可帮助您设计响应灵敏且灵活的布局。您将学习如何使用 flexbox 有效地对齐、分布和排序元素，使您的设计在不同设备上更具适应性。

什么是 flexbox？

flexbox 是“flexible box layout”的缩写，是一个 css 布局模块，可以更轻松地设计可适应不同屏幕尺寸的布局。它允许容器中的项目灵活排列，根据可用空间动态对齐它们。

1. flexbox 术语

在开始使用 flexbox 之前，我们先了解一下它的主要组件：

• flex container：保存 flex 项目的父元素。
• flex items：flex 容器内的子元素。

您可以通过在容器上设置 display: flex 来启用 flexbox。

立即学习“前端免费学习笔记（深入）”；

• 示例：

  .flex-container {
    display: flex;
  }

现在，.flex-container 内的子元素将按照 flexbox 规则运行。

2.弯曲方向

flex-direction 控制弹性项目在容器中放置的方向。默认情况下，项目放置在一行中。

• 价值观：

  • row：项目水平排列（默认）。
  • row-reverse：项目水平排列，但顺序相反。
  • 列：项目垂直排列。
  • column-reverse：项目以相反的顺序垂直排列。

• 示例：
  
  

  .flex-container {
    display: flex;
    flex-direction: row; /* you can change to column */
  }

3.证明内容合理

justify-content 用于沿主轴对齐 flex 项目（如果 flex-direction: row 则水平对齐；如果 flex-direction: column 则垂直对齐）。

• 价值观：

  • flex-start：将项目与开头对齐。
  • flex-end：将项目对齐到末尾。
  • center：将项目居中。
  • space- between: 展开项目，第一个项目在开始，最后一个项目在结束。
  • space-around：在每个项目周围添加相等的空间。

• 示例：
  
  

  .flex-container {
    justify-content: center;
  }

在此示例中，flex 容器内的项目将居中。

4.对齐项目

align-items 沿横轴（垂直于主轴）对齐弹性项目。

• 价值观：

  • 拉伸：拉伸项目以填充容器（默认）。
  • flex-start：将项目与横轴的起点对齐。
  • flex-end：将项目与交叉轴的末端对齐。
  • center：将项目沿横轴居中。

• 示例：
  
  

  .flex-container {
    align-items: center;
  }

5.弹性包裹

默认情况下，弹性项目放置在一行上，并且内容可能会缩小以适应。 flex-wrap 允许弹性项目在必要时换行到多行。

• 价值观：

  • nowrap：项目保留在一行上（默认）。
  • 换行：项目换行到多行。
  • 反向换行：项目换行到多行，但顺序相反。

• 示例：
  
  

  .flex-container {
    flex-wrap: wrap;
  }

6.对齐内容

align-content 沿横轴对齐多行 flex 项目。当容器在横轴上有额外的空间，并且有多行弹性项目时使用。

• 价值观：

  • flex-start：将行打包到开头。
  • flex-end：将行打包到末尾。
  • center：将线排列到中心。
  • space- between：均匀分布线条，线条之间留有空间。
  • space-around：均匀分布线条，周围留有空间。
  • 拉伸：拉伸线条以占据可用空间。

• 示例：
  
  

  .flex-container {
    align-content: space-between;
  }

实际示例：创建响应式照片库

让我们使用 flexbox 创建一个响应式照片库。

html：

<div class="gallery">
  <div class="gallery-item">image 1</div>
  <div class="gallery-item">image 2</div>
  <div class="gallery-item">image 3</div>
  <div class="gallery-item">image 4</div>
  <div class="gallery-item">image 5</div>
</div>

css：

body {
  margin: 0;
  font-family: arial, sans-serif;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px;
  padding: 20px;
}

.gallery-item {
  flex-basis: calc(25% - 20px); /* four items per row */
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .gallery-item {
    flex-basis: calc(50% - 20px); /* two items per row on smaller screens */
  }
}

在此示例中：

• .gallery 容器使用 flexbox 来包裹项目并将其均匀分布。
• 每个 .gallery-item 占据容器宽度的 25%（减去间隙）。
• 在较小的屏幕（低于 768 像素）上，项目会调整为 50% 宽度以提高可读性。

使用 flexbox 的响应式设计

flexbox 是一款强大的响应式设计工具。您可以使用媒体查询根据屏幕尺寸更改 flex 属性来轻松调整布局。

• 示例：

  @media screen and (max-width: 600px) {
    .gallery-item {
      flex-basis: 100%; /* Items take up full width on small screens */
    }
  }

使用此媒体查询，在小于 600 像素的屏幕上，每个图库项目将占据容器的整个宽度。

练习

1. 使用 flexbox 创建导航栏，左侧为徽标，右侧为链接。
2. 创建一个三列布局，在较小的屏幕上包裹成一列。
3. 使用 justify-content 和align-items 创建不同的布局，例如居中部分或具有均匀间隔链接的页脚。

下一步：在下一堂课中，我们将探索 css 网格 - 深入探究，您将了解 css 网格以及它与 flexbox 构建的比较复杂的布局。敬请期待！

在 linkedin 上关注我-

里多伊·哈桑