写在前面：本文转自阮一峰的博客。感觉写的非常清晰，就转了。感谢前辈。

转载的地址为：

作者：阮一峰。

Flex 布局教程：实例篇

你会看到，不管是什么布局，Flex往往都可以几行命令搞定。

一、骰子的布局

骰子的一面，最多可以放置9个点。

如果不加说明，本节的HTML模板一律如下。

 

上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。

1.1 单项目

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

}

设置项目的对齐方式，就能实现居中对齐和右对齐。

}

}

设置交叉轴对齐方式，可以垂直移动主轴。

}

}

 

 

 

1.2 双项目

 

 

 

 

 

 

1.3 三项目

 

1.4 四项目

 

HTML代码如下。

 

CSS代码如下。

 

1.5 六项目

 

 

HTML代码如下。

 

CSS代码如下。

 

1.6 九项目

 

二、网格布局 2.1 基本网格布局

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。

HTML代码如下。

 

CSS代码如下。

 

2.2 百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

HTML代码如下。

**

 

三、圣杯布局