CSS之Flex布局

CSS Flex布局笔记

一、Flex布局简介

Flex布局，全称是Flexible Box，也被称为弹性盒子布局。它是一个一维的布局模型，主要用于在一维空间（行或列）内对元素进行灵活排列。Flex布局提供了更高效、更直观的方式来对容器中的项目进行对齐、排序和分布空间。

二、Flex容器与Flex项目

1. Flex容器：使用display: flex;或display: inline-flex;的元素就是Flex容器。
2. Flex项目：在Flex容器内的子元素称为Flex项目。

三、主要属性

1. flex-direction: 定义主轴的方向（即项目的排列方向）。可选值有row（默认值，从左到右）、row-reverse（从右到左）、column（从上到下）和column-reverse（从下到上）。
2. flex-wrap: 控制项目是否换行。可选值有nowrap（默认，不换行）、wrap（换行）和wrap-reverse（反向换行）。
3. flex-flow: 是flex-direction和flex-wrap的简写属性，用于同时设置主轴方向和换行方式。例如，flex-flow: row wrap;。
4. justify-content: 定义了沿着主轴上的项目之间的对齐方式。可选值有flex-start（默认，起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间的空间平均分布）、space-around（每个项目两侧的空间平均分布）和space-evenly（所有项目之间的空间以及项目两侧的空间平均分布）。
5. align-items: 定义了项目在交叉轴上的对齐方式。可选值有stretch（默认，项目会尽可能占据整个容器的高度）、flex-start、flex-end、center、baseline和stretch。
6. align-content: 当项目在交叉轴上有多行时，此属性决定了多行之间的对齐方式。可选值与align-items相似。

四、使用Flex布局的好处

1. 简单直观：相比于传统的布局方式，Flex布局更加直观和易于理解。
2. 灵活的对齐方式：Flex布局提供了多种对齐方式，可以轻松实现各种复杂的布局需求。
3. 自动调整大小：Flex布局能够自动调整元素的大小，以适应不同的屏幕尺寸和设备类型。
4. 易于维护：使用Flex布局可以减少样式的复杂性，使得代码更易于维护和更新。

五、示例

下面是一个简单的示例，展示了如何使用Flex布局来排列一组项目：

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

.item {
  width: 100px;
  height: 100px;
}

在HTML中：

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

在这个示例中，.container是一个Flex容器，它的子元素（.item）是Flex项目。通过设置justify-content: space-between;，项目之间的空间平均分布；通过设置align-items: center;，项目在交叉轴上居中对齐。