今天我们来聊聊 CSS 里的弹性盒子（Flex Box）。

简单来说，弹性盒子是一种布局模式，可以让我们更轻松地排列和对齐网页上的元素，尤其是在我们不知道元素具体大小或者它们会动态变化的时候。

基本概念

弹性盒子布局主要由两部分组成：容器（container）和项目（items）。

• 容器：就是包含弹性项目的父元素。

• 项目：是直接位于容器内的子元素。

要使用弹性盒子布局，只需将容器的 display 属性设置为 flex 或 inline-flex。

.container {   display: flex; } 

一个例子

下面一个普通流布局的页面。

<div>   <p>     1. CSS 全称 Cascading Style     Sheets，层叠样式表。样式表的作用，就像给房子装修差不多，它就是为 HTML     页面进行装修，让它变得更好看。   </p>   <p>     2. 在学习 CSS 之前，需要首先知道 HTML，如果你还不会的话，可以先去把 HTML21     天入门教程啃完。CSS 的学习，同样需要大量的练习，而练习所使用的工具，和 HTML     的学习一致。   </p>   <p>     3. 这里需要说一下，学习 CSS 和 HTML 略微不太一样。之前在学习 HTML     时，建议大家一定要多手写，那是因为 HTML     的标签就那么多，而且都不长，多写写基本上都能记住。   </p> </div> 

它在浏览器在呈现如下：

如果为容器 div 设置了 display 为 flex 的话，效果则如下：

div {   display: flex; } 

弹性盒子模型

借一张图，说明一下弹性盒子模型

当元素设置为 flex 时，它沿两个轴来布局：

• 主轴（main axis）沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。

• 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。

理解模型的概念，就可以来看看具体的一些属性了。

下面介绍的属性，基本上围绕上面的两个轴来做文章，帮助我们实现现在布局可能。

主要属性

前面说了弹性盒子布局主两部分组成，下面也按这两个部分分开说一个对应的属性。

容器属性

容器可以为里面的项目定义排列方向、主轴上的对齐方式和交叉轴上的对齐方式。

一个一个来看。

1.flex-direction：定义项目的排列方向。

• row（默认值）：从左到右排列。

• row-reverse：从右到左排列。

• column：从上到下排列。

• column-reverse：从下到上排列。

.container {   flex-direction: row; } 

2.justify-content：定义项目在主轴上的对齐方式。

• flex-start（默认值）：项目从主轴的起点开始。

• flex-end：项目从主轴的终点开始。

• center：项目在主轴上居中。

• space-between：项目之间的间隔相等。

• space-around：项目之间的间隔相等，项目与边框之间的间隔是项目之间间隔的一半。

.container {   justify-content: center; } 

3.align-items：定义项目在交叉轴上的对齐方式。

• stretch（默认值）：项目拉伸以填充容器。

• flex-start：项目在交叉轴的起点对齐。

• flex-end：项目在交叉轴的终点对齐。

• center：项目在交叉轴上居中。

• baseline：项目的基线对齐。

.container {   align-items: flex-start; } 

项目属性

项目属性可以为项目定义放大比例、缩小比例及初始大小。

1. flex-grow：定义项目的放大比例。

• 0（默认值）：项目不放大。

• 正整数：项目按比例放大。

.item {   flex-grow: 1; } 

2.flex-shrink：定义项目的缩小比例。

• 1（默认值）：项目按比例缩小。

• 0：项目不缩小。

.item { flex-shrink: 0; } 

3.flex-basis：定义项目的初始大小。可以是长度值（如 20%、10rem）或 auto（默认值）。

.item { flex-basis: 100px; } 

总结

• 🍑 弹性盒子是一种布局模式，可以让我们更轻松地排列和对齐网页上的元素。

• 🍑 弹性盒子布局主要由两部分组成：容器（container）和项目（items）。

• 🍑 容器属性和项目属性用于定义容器内项目的排列方式及其它行为。