Flex 布局教程：实例篇

好的，下面我们来看一些Flex布局的实例。

## 实例一：水平居中

让一个元素在父容器中水平居中，可以使用以下方法：

<div class="container">
  <div class="box">Hello World</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  background-color: #ccc;
  padding: 20px;
}

解释：

- `display: flex;`设置容器为Flex布局。
- `justify-content: center;`将子元素水平居中。
- `align-items: center;`将子元素垂直居中。
- `height: 100vh;`设置容器高度为100vh，保证子元素在垂直方向上居中。

## 实例二：等分布局

让多个元素等分布局可以使用以下方法：

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

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

.box {
  flex: 1;
  background-color: #ccc;
  padding: 20px;
  margin: 0 10px;
}

解释：

- `display: flex;`设置容器为Flex布局。
- `justify-content: space-between;`将子元素等间距排列。
- `flex: 1;`将子元素等分布局。

## 实例三：垂直居中

让一个元素在父容器中垂直居中，可以使用以下方法：

<div class="container">
  <div class="box">Hello World</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  background-color: #ccc;
  padding: 20px;
  margin: auto;
}

解释：

- `display: flex;`设置容器为Flex布局。
- `justify-content: center;`将子元素水平居中。
- `align-items: center;`将子元素垂直居中。
- `height: 100vh;`设置容器高度为100vh，保证子元素在垂直方向上居中。
- `margin: auto;`使元素在水平方向上居中。

## 实例四：项目排序

使用Flex布局可以很方便地对项目进行排序，例如：

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

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

.box {
  flex: 1 0 200px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #fff;
  text-shadow: 1px 1px #000;
}
.box:nth-child(1) {
  order: 3;
}
.box:nth-child(2) {
  order: 1;
}
.box:nth-child(3) {
  order: 4;
}
.box:nth-child(4) {
  order: 2;
}
.box:nth-child(5) {
  order: 5;
}

解释：

- `display: flex;`设置容器为Flex布局。
- `flex-wrap: wrap;`设置弹性容器的子元素在一行排不下时，自动换行。
- `flex: 1 0 200px;`设置子元素的伸缩比例为1，基准大小为0，最大值为200px。
- `margin: 10px;`设置子元素的外边距为10px。
- `order:`设置子元素的显示顺序。

以上就是一些Flex布局的实例，希望对你有所帮助。