Flex排版终极指南：一行四个元素均分布局

前端

2022-12-20 00:29:03

如何使用 Flex 布局构建一行四个元素均分布布局

Flex 布局是 CSS 中一项强而有力的布局技术，可轻松创建灵活且响应式的布局。其中一个常见的应用场景就是一行四个元素均分布局。本指南将逐步演示如何实现此布局，帮助你掌握 Flex 布局的基本原理。

1. 前期准备

准备工作包括：

HTML 和 CSS 基础知识
文本编辑器或 IDE
网络浏览器

2. 创建 HTML 结构

首先，创建一个包含四个元素的 HTML 结构：

<div class="container">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
  <div class="item">项目 4</div>
</div>

<div class="container"> 元素是包含元素的容器。

3. 添加 Flex 布局样式

为容器元素添加 Flex 布局样式：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

display: flex;：声明容器为 Flex 容器。
flex-direction: row;：设置主轴方向为水平。
justify-content: space-around;：子元素在主轴上平均分布，并添加相等间隔。
align-items: center;：子元素在交叉轴上垂直居中。

4. 调整元素样式

最后，根据需要调整子元素样式：

.item {
  width: 25%;
  padding: 10px;
  border: 1px solid black;
}

width: 25%;：设置子元素宽度为容器宽度的 25%。
padding: 10px;：添加内边距。
border: 1px solid black;：添加边框。

代码示例

完整代码示例：

<div class="container">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
  <div class="item">项目 4</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.item {
  width: 25%;
  padding: 10px;
  border: 1px solid black;
}