Flex布局教程：实例篇

Flex布局教程：实例篇

本文中介绍的布局格式包括以下七种：

一、骰子的布局

二、网格布局

三、圣杯布局

四、输入框的布局

五、悬挂式布局

六、固定的底栏

七、流式布局

一、骰子的布局

二、网格布局

2.1基本网格布局（其实可以用boorstrap？吧）

最简单的网格布局就是平均布局。在容器里边平均分配空间

 

Html代码如下：

<div class = “Grid”>  //flex容器

<div class = “”Grid-cell>...</div> //flex项目

<div class = “”Grid-cell>...</div>

<div class = “”Grid-cell>...</div>

</div>

Css代码如下：

.Grid{ display:flex