原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。

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

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

一、骰子的布局

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

下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。

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


<div class="box">
<span class="item"></span>
</div>

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

1.1 单项目

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


.box {
display: flex;
}

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


.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代码如下。


<div class="box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>

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代码如下。


<div class="box">
<div class="row">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
<span class="item"></span>
</div>
</div>

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.1 基本网格布局

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

HTML代码如下。


<div class="Grid">
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
</div>

CSS代码如下。


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

2.2 百分比布局

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

HTML代码如下。


<div class="Grid">
<div class="Grid-cell u-1of4">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell u-1of3">...</div>
</div>

.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%;
}

三、圣杯布局

圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。

HTML代码如下。


<body class="HolyGrail">
<header>...</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
<footer>...</footer>
</body>

CSS代码如下。


.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
} header,
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-ads,
.HolyGrail-content {
flex: auto;
}
}

四、输入框的布局

我们常常需要在输入框的前方添加提示,后方添加按钮。

HTML代码如下。


<div class="InputAddOn">
<span class="InputAddOn-item">...</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">...</button>
</div>

CSS代码如下。


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

五、悬挂式布局

有时,主栏的左侧或右侧,需要添加一个图片栏。

HTML代码如下。


<div class="Media">
<img class="Media-figure" src="" alt="">
<p class="Media-body">...</p>
</div>

CSS代码如下。


.Media {
display: flex;
align-items: flex-start;
} .Media-figure {
margin-right: 1em;
} .Media-body {
flex: 1;
}

六、固定的底栏

有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。

HTML代码如下。


<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>

CSS代码如下。


.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
} .Site-content {
flex: 1;
}

七,流式布局

每行的项目数固定,会自动分行。

CSS的写法。


.parent {
width: 200px;
height: 150px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
} .child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}

(完)

微信小程序前置课程:flex布局(二)的更多相关文章

  1. 微信小程序_(组件)flex布局

    小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction: ...

  2. 微信小程序 View:flex 布局

    微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...

  3. 微信小程序前置课程:Flex 布局教程(一):语法篇

    原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 网页布局(layout)是CSS的一个重点 ...

  4. 微信小程序CSS之Flex布局

    转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...

  5. 在微信小程序中学习flex布局

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就 ...

  6. 微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载

    微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 1.不同类型文件的选取 1.1 常用的图片 视频 对于大部分开发者来说,需要上传的文件形式主要为图片,微信为此提供了接口. wx.ch ...

  7. 微信小程序从零开始开发步骤(二)创建小程序页面

    上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是 要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录 选中page,右击鼠标,从硬盘打 ...

  8. 微信小程序把玩(三十二)Image API

    原文:微信小程序把玩(三十二)Image API 选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx. ...

  9. 微信小程序:原生热布局终将改变世界

    关于本文的所有观点都是网上收集,与作者本人没有任何关系! 最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小 ...

随机推荐

  1. 【转】webAPP快速入门

    WebApp与Native App有何区别呢? Native App: 1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C. 2.更新体验较差.同时也比较麻烦.每一次发布 ...

  2. JSON之FastJson

    FastJson是什么? 从网上查到--- 官网地址:http://code.alibabatech.com/wiki/display/FastJSON/Overview(已关闭) FastJSOn是 ...

  3. SpringMVC全注解

    SpringMVC全注解不是你们那么玩的 前言:忙了段时间,忙得要死要活,累了一段时间,累得死去活来. 偶尔看到很多零注解配置SpringMVC,其实没有根本的零注解. 1)工程图一张: web.xm ...

  4. DataInputStream(二进制输入流)和DataOutputStream二进制输出流(注意:in是从本地文件输入到程序中,out是从程序输出到本地种)

    //切记以数据类型输出就以什么数据类型读入, //例如: dos.writeInt(100);写入,读取:dis.readUTF()有时会出现意想不到的错误,所以要时刻记得以数据类型输出就以什么数据类 ...

  5. linux创建进程和等待进程退出

    在WIN32下,在一个进程里我们可以使用CreateProcess()创建一个进程,然后通过调用WaitForSingleObect(), WaitForMultipleObject()等待进程退出. ...

  6. Mvc的多层架构

    分享一个Mvc的多层架构,欢迎大家拍砖斧正   多层架构是什么? 多层架构是开发人员在开发过程当中面对复杂且易变的需求采取的一种以隔离控制为主的应对策略,关于多层架构的标准,我认为有一句话是比较有代表 ...

  7. Visual Studio 2013 Use HTTPS (SSL) On Web Application Projects

    公司调试HTTPS接口会用到,原文:http://www.codeproject.com/Tips/766918/Visual-Studio-Use-HTTPS-SSL-On-Web-Applicat ...

  8. 传说中的WCF(1):这东西难学吗?

    WCF难学吗? 是啊,这问题估计很多人都会问,也包括阿拉在内,也有此深刻而严重的凝问. 也有人说:“如何某项技术可以化繁为简,学起来轻松一点就好了.”也许,人类开生就摆脱不了一种习性——懒惰:不过,也 ...

  9. JAVA学习:内部类

    一.内部类的访问规则: 1.内部类可以直接访问外部类中的成员,包括私有.格式为外部类名.this 2.外部类要访问内部类,必须建立内部类对象. 代码: class Outer { private in ...

  10. 协作图(通信图)collaboration diagram

    协作图(通信图)collaboration diagram 系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UM ...