CSS Flex布局：初学者指南

前端

2023-10-07 23:47:11

Flex 布局简介

Flex 布局（Flexbox）是 CSS3 中引入的一项强大的布局技术，它允许开发人员轻松创建响应式、灵活的布局结构。Flex 布局基于盒子模型，具有许多特点，包括：

弹性：Flex 布局中的元素可以根据其父容器的大小进行伸缩，从而适应不同屏幕尺寸和设备。
对齐：Flex 布局允许元素在父容器中对齐，无论是水平、垂直还是两者皆有。
排序：Flex 布局允许元素按一定顺序排列，包括水平、垂直或两者皆有。
间距：Flex 布局允许元素之间的间距进行控制，无论是水平、垂直还是两者皆有。

Flex 布局元素

Flex 布局中的元素由两个主要部分组成：

Flex 容器：定义 Flex 布局的父容器，其子元素将遵循 Flex 布局规则。
Flex 项目：位于 Flex 容器中的子元素。

Flex 布局属性

Flex 布局通过一组属性来定义元素的行为，这些属性包括：

flex-direction：定义 Flex 容器中元素的排列方向，包括水平（row）、垂直（column）或两者皆有（row-reverse 和 column-reverse）。
flex-wrap：定义 Flex 容器中元素是否可以换行，包括不换行（nowrap）、换行（wrap）或两端对齐换行（wrap-reverse）。
justify-content：定义 Flex 容器中元素在水平方向上的对齐方式，包括靠左（flex-start）、居中（center）、靠右（flex-end）或两端对齐（space-between 和 space-around）。
align-items：定义 Flex 容器中元素在垂直方向上的对齐方式，包括靠上（flex-start）、居中（center）、靠下（flex-end）或两端对齐（stretch）。
align-content：定义 Flex 容器中元素在垂直方向上的对齐方式，包括靠上（flex-start）、居中（center）、靠下（flex-end）或两端对齐（space-between 和 space-around）。

Flex 布局示例

<div class="flex-container">
  <div class="flex-item">元素 1</div>
  <div class="flex-item">元素 2</div>
  <div class="flex-item">元素 3</div>
</div>

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

.flex-item {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}