第 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 像素的屏幕上，每个图库项目将占据容器的整个宽度。
练习
- 使用 flexbox 创建导航栏，左侧为徽标，右侧为链接。
- 创建一个三列布局，在较小的屏幕上包裹成一列。
- 使用 justify-content 和align-items 创建不同的布局，例如居中部分或具有均匀间隔链接的页脚。
下一步：在下一堂课中，我们将探索 css 网格 - 深入探究，您将了解 css 网格以及它与 flexbox 构建的比较复杂的布局。敬请期待！
在 linkedin 上关注我-
里多伊·哈桑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
