深入浅出 Flex 布局应用：实例教程（第二部分）

时间：11-07 神话故事提交错误

这篇文章给大家聊聊关于深入浅出 Flex 布局应用：实例教程（第二部分），以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

我只列出代码。详细语法解释请参考《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。

1. 骰子的布局

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

接下来我们看看Flex是如何实现从1点到9点布局的。您可以前往codepen查看Demo。

如果没有给出解释，本节的HTML 模板如下。

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

1.1 单个项目

首先，左上角只有一个点。 Flex布局默认第一行左对齐，所以一行代码就足够了。

.box{display:flex;}

设置item的对齐方式，实现居中对齐和右对齐。

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

.box{display:flex;justify-content:flex-end;}

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

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

.box{display:flex;justify-content:center;align-items:center;}

.box{display:flex;justify-content:center;align-items:flex-end;}

.box{display:flex;justify-content:flex-end;align-items:flex-end;}

1.2 双项目

.box{display:flex;justify-content:space- Between;}

.box{display:flex;flex-direction:column;justify-content:space- Between;}

.box{display:flex;flex-direction:column;justify-content:space- Between;align-items:center;}

.box{display:flex;flex-direction:column;justify-content:space- Between;align-items:flex-end;}

.box{display:flex;}.item:nth-child(2){align-self:center;}

.box{display:flex;justify-content:space- Between;}.item:nth-child(2){align-self:flex-end;}

1.3 三个项目

.box{display:flex;}.item:nth-child(2){align-self:center;}.item:nth-child(3){align-self:flex-end;}

1.4 四项

.box{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:space- Between;}

HTML代码如下。

CSS代码如下。

.box{display:flex;flex-wrap:wrap;align-content:space- Between;}.column{flex-basis:100%;display:flex;justify-content:space- Between;}

1.5 六项

.box{display:flex;flex-wrap:wrap;align-content:space- Between;}

.box{display:flex;flex-direction:column;flex-wrap:wrap;align-content:space- Between;}

HTML代码如下。

CSS代码如下。

.box{display:flex;flex-wrap:wrap;}.row{flex-basis:100%;display:flex;}.row:nth-child(2){justify-content:center;}.row:nth-child(3){justify-content:space- Between;}

1.6 九项

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

2. 网格布局

2.1 基本网格布局

最简单的网格布局是均匀分布。在容器内均匀分配空间，类似于上面的骰子布局，但是需要设置项目的自动缩放。

HTML代码如下。

…………

CSS代码如下。

.Grid{display:flex;}.Grid-cell{flex:1;}

2.2 百分比布局

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

HTML代码如下。

…………

.Grid{display:flex;}.Grid-cell{flex:1;}.Grid-cell.u-full{flex:0 0 100%;}.Grid-cell.u-1of2{flex:0 0 50%;}.Grid-cell.u -1of3{flex:0 0 33.3333%;}.Grid-cell.u-1of4{flex:0 0 25%;}

3. 圣杯布局

圣杯布局是指最常见的网站布局之一。页面从上到下分为三个部分：页眉、正文和页脚。躯干分为三个水平栏，从左到右：导航栏、主栏和次栏。

HTML代码如下。

CSS代码如下。

.HolyGrail{display:flex;min-height:100vh;flex-direction:column;}标题，

footer{flex:1;}.HolyGrail-body{display:flex;flex:1;}.HolyGrail-content{flex:1;}.HolyGrail-nav,HolyGrail-ads{/* 两个侧边栏的宽度设置为12em */flex:0 0 12em ;} .HolyGrail-nav{/* 将导航移至最左侧*/order:-1;}

如果屏幕很小，躯干的三列会自动变成垂直堆叠。

@media (max-width:768px){.HolyGrail-body{flex-direction:column;flex:1;}.HolyGrail-nav,

.HolyGrail-广告，

.HolyGrail-content{flex:auto;}}

4、输入框的布局

我们经常需要在输入框前面加一个提示，在后面加一个按钮。

HTML代码如下。

CSS代码如下。

.InputAddOn{display:flex;}.InputAddOn-field{flex:1;}

5、悬浮式布局

有时，需要在主栏的左侧或右侧添加图片栏。

HTML代码如下。