CSS Flexbox 深入探究

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

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

什么是 flexbox？

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

1. flexbox 术语

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

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

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

  .flex-container {    display: flex;  }

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

2.弯曲方向

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

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

3.证明内容合理

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

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

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

4.对齐项目

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

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

5.弹性包裹

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

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

6.对齐内容

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

  .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 */  }}

在此示例中：

使用 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 上关注我-

里多伊·哈桑