深度剖析 flex 布局

一、flex 布局概述

flex 布局是 CSS3 引入的一种布局方式，它能够很好地解决传统布局中难以解决的一些问题。它使用起来简单易懂，对于响应式布局也能够提供方便。使用 flex 布局需要了解以下几个特性：

1. 容器属性

flex 布局的容器使用 display: flex; 声明，它的属性有：

.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  align-items: stretch | flex-start | flex-end | center | baseline;
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

2. 项目属性

flex 容器内的项目使用 flex: <flex-grow> <flex-shrink> <flex-basis>; 声明，或者使用简写形式 flex: <flex-grow> <flex-shrink>;，它的属性有：

.item {
  flex: <number> <number> <length> | auto | initial;
  order: <integer>;
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

二、 flex 布局实践

在实践中，flex 布局经常使用在以下几个场景：

1. 响应式布局

使用 flex 布局能够轻松实现响应式布局，它能够自适应不同宽度的屏幕。下面是一个使用 flex 布局实现响应式的代码示例：

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

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  width: 33%;
  height: 100px;
  background-color: #f2f2f2;
}

上面的代码能够在不同宽度的设备上自适应，并且能够实现等宽、等高的三列布局。

2. 水平居中与垂直居中

使用 flex 布局能够轻松实现水平垂直居中，以下是一个使用 flex 布局实现垂直水平居中的代码示例：

<div class="container">
  <div class="item">Flex</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.item {
  background-color: #f2f2f2;
  padding: 20px;
}

上面代码能够实现一个宽高自适应的容器，容器内的项目能够实现水平居中和垂直居中。

3. 布局排列

使用 flex 布局可以轻松实现项目的排列，以下是一个使用 flex 布局实现左侧固定宽度，右侧自适应宽度的代码示例：

<div class="container">
  <div class="item item-left">固定宽度</div>
  <div class="item item-right">自适应宽度</div>
</div>

.container {
  display: flex;
}
.item-left {
  width: 100px;
  background-color: #f2f2f2;
}
.item-right {
  flex: 1;
  background-color: #e6e6e6;
}

上面代码实现左侧固定宽度，右侧自适应宽度，并使用了 flex 布局的 flex: 1; 属性。

三、 flex 布局实例

下面是一些在实际项目中使用 flex 布局并且比较实用的代码示例：

1. 九宫格布局

九宫格布局是移动端开发中经常使用的一种布局方式，以下是一个使用 flex 布局实现的代码示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item {
  width: 33%;
  height: 100px;
  background-color: #f2f2f2;
  text-align: center;
  line-height: 100px;
}

上面代码实现了一个宽高相等的九宫格布局，并使用了 flex 布局的 justify-content: space-around; 属性。

2. 横向滚动

使用 flex 布局可以轻松实现横向滚动，以下是一个使用 flex 布局实现横向滚动的代码示例：

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

.container {
  display: flex;
  overflow-x: auto;
}
.item {
  flex: 0 0 200px;
  height: 200px;
  background-color: #f2f2f2;
  margin-right: 20px;
}

上面代码实现了一个横向滚动的容器，容器内的项目使用了 flex 布局的 flex: 0 0 200px; 属性。

3. 活动标签布局

使用 flex 布局可以轻松实现活动标签布局，以下是一个使用 flex 布局实现活动标签布局的代码示例：

<div class="container">
  <div class="item active">标签1</div>
  <div class="item">标签2</div>
  <div class="item">标签3</div>
  <div class="item">标签4</div>
  <div class="item">标签5</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}
.item {
  flex: 1;
  text-align: center;
  line-height: 50px;
  background-color: #f2f2f2;
  cursor: pointer;
}
.item.active {
  background-color: #1890ff;
  color: #fff;
}

上面代码实现了一个活动标签布局，使用了 flex 布局的 justify-content 和 align-items 属性，并使用了 active 类来实现选中状态。

结语

本文介绍了 flex 布局的概述、实践以及实例，从而能够更好地掌握 flex 布局的使用。