CSS系列之flex布局（实例篇）

缘起

自己在 CSS 学习过程中，对弹性布局一直一知半解，也是一直想搞懂的一个知识点，就当作自己做一个总结吧。

理论概述

flex容器

在弹性布局中，首先需要定义一个flex容器，然后将子元素放入其中。flex容器是一个块级元素，可以通过设置display: flex;属性来创建。

子元素

flex容器中的子元素是flex项目，它们在flex容器中可以根据需要进行伸缩和移动。flex项目可以通过设置flex属性来控制其在flex容器中的行为。

flex属性

flex属性是一个复合属性，它包含了多个子属性，用于控制flex项目的各个方面。这些子属性包括：

• flex-grow：控制flex项目在flex容器中增长（或伸缩）的程度。
• flex-shrink：控制flex项目在flex容器中收缩的程度。
• flex-basis：控制flex项目在flex容器中的初始大小。
• flex：这是一个简写属性，它可以同时设置flex-grow、flex-shrink和flex-basis。

实例应用

水平居中

弹性布局实现水平居中代码如下：

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

.container {
  display: flex;
  justify-content: center;
}

垂直居中

弹性布局实现垂直居中代码如下：

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

.container {
  display: flex;
  align-items: center;
}

流式布局

弹性布局实现流式布局代码如下：

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

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

兼容性

flexbox得到了所有主流浏览器的支持，包括IE 11+、Firefox、Chrome、Safari和Opera。但是，在IE 10和更早版本的IE浏览器中，flexbox是不支持的。

总结

flexbox是一个强大的工具，它可以帮助我们创建灵活、响应式的布局。通过了解flexbox的基本概念，并通过一些实例进行练习，我们可以掌握flexbox的使用方法，并将其应用到我们的项目中。