注:本文转自大神阮一峰,自己加了少许改动~
上一篇文章介绍了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:;
}
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:;
} .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:;
} .HolyGrail-body {
display: flex;
flex:;
} .HolyGrail-content {
flex:;
} .HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
} .HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
}
如果是小屏幕,躯干的三栏自动变为垂直叠加:
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex:;
}
.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:;
}
五、悬挂式布局
 
有时,主栏的左侧或右侧,需要添加一个图片栏。
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:;
}
六、固定的底栏
有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用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:;
}
七,流式布局
每行的项目数固定,会自动分行。
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布局:
<body>
<header>我是头部</header>
<section>我是内容区</section>
</body>
body{
display:flex;
flex-direction: column;
width: 100%;
height: 100%;
header{
height: 50px;
}
section{
flex:;
height:;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
 
 
 
 

二、Flex 布局教程:实例篇的更多相关文章

  1. Flex 布局教程实例

    Flex 布局教程实例 一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 F ...

  2. Flex 布局教程:实例

    分类: 开发者手册 Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Fle ...

  3. Flex 布局:实例篇

    上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. ​ 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇& ...

  4. Flex 布局教程:实例篇【转】

    Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html ...

  5. Flex 布局教程:实例篇(转)

    你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...

  6. CSS学习笔记(12)--Flex 布局教程:实例篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...

  7. Flex 布局教程:语法和实例

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

  8. Flex 布局教程:语法篇 【转】

    Flex 布局教程:语法篇   作者: 阮一峰 日期: 2015年7月10日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网 ...

  9. (转)Flex 布局教程:

    这个博客的内容比较新,多看看 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html [语法篇] http://www.ruanyifeng. ...

随机推荐

  1. idea 修改jar包源码的编码

    项目中有些老的jar不是utf8打包的,中文显示乱码 打开的文件上直接右键, 修改只读jar的源码 自己写的文件可以在右下角修改编码,只读文件就要用上面的方法了

  2. git泄露利用脚本

    留一下万一之后用得着呢 工作原理 1.解析.git/index文件,找到工程中所有的: ( 文件名,文件sha1 ) 2.去.git/objects/ 文件夹下下载对应的文件 3.zlib解压文件,按 ...

  3. WinForm之GDI画图步骤

    Graphics g = this.CreateGraphics(); //这句是创建画布g,根据窗体得到窗体的画布 Pen p = new Pen(Color.Red, 2); //这句是创建一个红 ...

  4. docker jenkins使用(二)

    jenkins的安装很简单,但是jenkins的初次使用却很头疼.对于小白来说有点不太明白 背景: 开发更新app需要很多步骤,生成jar包.上传服务器.更新启动程序,如果有很多服务器,那么需要做好多 ...

  5. Java 的多态

    1    多态的概念 多态(?) 可以理解为多种状态/多种形态 同一事物,由于条件不同,产生的结果不同   程序中的多态 同一引用类型,使用不同的实例而执行结果不同的. 同:同一个类型,一般指父类. ...

  6. 浅谈Cordova优缺点与环境部署(转载)

    浅谈Cordova优缺点与环境部署 作者:苏华杰 简介 Cordova是一个用基于HTML.CSS和JavaScript的,用于创建跨平台移动应用程序的快速开发平台.它使开发者能够利用iPhone.A ...

  7. vue2.0修饰符sync用法

    如果子组件是一个弹窗,我们想通过点击关闭按钮来关闭子组件弹窗,子组件弹窗的v-show由变量isVisible控制,这个变量通过props由父组件来注入, 而子组件无法改变props里面的变量的值,但 ...

  8. org.dbunit.dataset.NoSuchTableException: t_group

    遇到这个错误发现异常信息里有一项是这个 15:30:10,609 ERROR SchemaUpdate:236 - HHH000388: Unsuccessful: create table t_gr ...

  9. Derby的jar说明

    Derby的jar说明 Derby的下载后,解压发现lib中有很多jar包,下面说明一下每个jar包的用途: 引擎库 derby.jar是引擎库,必须的 For embedded databases. ...

  10. Azure SQL Federation(联合)

    说Federation(联合)之前,先说下,表的垂直分割 和 水平分割----------------------------------------------------------------- ...