注：本文转自大神阮一峰，自己加了少许改动~
上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。
你会看到，不管是什么布局，Flex往往都可以几行命令搞定。
我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。
 
一、骰子的布局
 
骰子的一面，最多可以放置9个点。
下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。
如果不加说明，本节的HTML模板一律如下。
  1. <div class="box">
  2.   <span class="item"></span>
  3. </div>
上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。
1.1 单项目
首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。
  1. .box {
  2.   display: flex;
  3. }
设置项目的对齐方式，就能实现居中对齐和右对齐。
  1. .box {
  2.   display: flex;
  3.   justify-content: center;
  4. }
  5.  
  6. .box {
  7.   display: flex;
  8.   justify-content: flex-end;
  9. }
设置交叉轴对齐方式，可以垂直移动主轴。
  1. .box {
  2.   display: flex;
  3.   align-items: center;
  4. }
  5.  
  6. .box {
  7.   display: flex;
  8.   justify-content: center;
  9.   align-items: center;
  10. }
  11.  
  12. .box {
  13.   display: flex;
  14.   justify-content: center;
  15.   align-items: flex-end;
  16. }
  17.  
  18. .box {
  19.   display: flex;
  20.   justify-content: flex-end;
  21.   align-items: flex-end;
  22. }
1.2 双项目
  1. .box {
  2.   display: flex;
  3.   justify-content: space-between;
  4. }
  5.  
  6. .box {
  7.   display: flex;
  8.   flex-direction: column;
  9.   justify-content: space-between;
  10. }
  11.  
  12. .box {
  13.   display: flex;
  14.   flex-direction: column;
  15.   justify-content: space-between;
  16.   align-items: center;
  17. }
  18.  
  19. .box {
  20.   display: flex;
  21.   flex-direction: column;
  22.   justify-content: space-between;
  23.   align-items: flex-end;
  24. }
  25.  
  26. .box {
  27.   display: flex;
  28. }
  29.  
  30. .item:nth-child(2) {
  31.   align-self: center;
  32. }
  33.  
  34. .box {
  35.   display: flex;
  36.   justify-content: space-between;
  37. }
  38.  
  39. .item:nth-child(2) {
  40.   align-self: flex-end;
  41. }
1.3 三项目
  1. .box {
  2.   display: flex;
  3. }
  4.  
  5. .item:nth-child(2) {
  6.   align-self: center;
  7. }
  8.  
  9. .item:nth-child(3) {
  10.   align-self: flex-end;
  11. }
1.4 四项目
  1. .box {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4.   justify-content: flex-end;
  5.   align-content: space-between;
  6. }
HTML代码如下：
  1. <div class="box">
  2.   <div class="column">
  3.     <span class="item"></span>
  4.     <span class="item"></span>
  5.   </div>
  6.   <div class="column">
  7.     <span class="item"></span>
  8.     <span class="item"></span>
  9.   </div>
  10. </div>
CSS代码如下：
  1. .box {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4.   align-content: space-between;
  5. }
  6.  
  7. .column {
  8.   flex-basis: 100%;
  9.   display: flex;
  10.   justify-content: space-between;
  11. }
1.5 六项目
  1. .box {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4.   align-content: space-between;
  5. }
  6.  
  7. .box {
  8.   display: flex;
  9.   flex-direction: column;
  10.   flex-wrap: wrap;
  11.   align-content: space-between;
  12. }
HTML代码如下：
  1. <div class="box">
  2.   <div class="row">
  3.     <span class="item"></span>
  4.     <span class="item"></span>
  5.     <span class="item"></span>
  6.   </div>
  7.   <div class="row">
  8.     <span class="item"></span>
  9.   </div>
  10.   <div class="row">
  11.      <span class="item"></span>
  12.      <span class="item"></span>
  13.   </div>
  14. </div>
CSS代码如下：
  1. .box {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4. }
  5.  
  6. .row{
  7.   flex-basis: 100%;
  8.   display:flex;
  9. }
  10.  
  11. .row:nth-child(2){
  12.   justify-content: center;
  13. }
  14.  
  15. .row:nth-child(3){
  16.   justify-content: space-between;
  17. }
1.6 九项目
  1. .box {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4. }
二、网格布局
 
2.1 基本网格布局
最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。
HTML代码如下。
  1. <div class="Grid">
  2.   <div class="Grid-cell">...</div>
  3.   <div class="Grid-cell">...</div>
  4.   <div class="Grid-cell">...</div>
  5. </div>
CSS代码如下：
  1. .Grid {
  2.   display: flex;
  3. }
  4.  
  5. .Grid-cell {
  6.   flex:;
  7. }
2.2 百分比布局
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
HTML代码如下：
  1. <div class="Grid">
  2.   <div class="Grid-cell u-1of4">...</div>
  3.   <div class="Grid-cell">...</div>
  4.   <div class="Grid-cell u-1of3">...</div>
  5. </div>
  1. .Grid {
  2.   display: flex;
  3. }
  4.  
  5. .Grid-cell {
  6.   flex:;
  7. }
  8.  
  9. .Grid-cell.u-full {
  10.   flex: 0 0 100%;
  11. }
  12.  
  13. .Grid-cell.u-1of2 {
  14.   flex: 0 0 50%;
  15. }
  16.  
  17. .Grid-cell.u-1of3 {
  18.   flex: 0 0 33.3333%;
  19. }
  20.  
  21. .Grid-cell.u-1of4 {
  22.   flex: 0 0 25%;
  23. }
三、圣杯布局
 
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
HTML代码如下：
  1. <body class="HolyGrail">
  2.   <header>...</header>
  3.   <div class="HolyGrail-body">
  4.     <main class="HolyGrail-content">...</main>
  5.         <nav class="HolyGrail-nav">...</nav>
  6.     <aside class="HolyGrail-ads">...</aside>
  7.   </div>
  8.   <footer>...</footer>
  9. </body>
CSS代码如下：
  1. .HolyGrail {
  2.   display: flex;
  3.   min-height: 100vh;
  4.   flex-direction: column;
  5. }
  6.  
  7. header,
  8. footer {
  9.   flex:;
  10. }
  11.  
  12. .HolyGrail-body {
  13.   display: flex;
  14.   flex:;
  15. }
  16.  
  17. .HolyGrail-content {
  18.   flex:;
  19. }
  20.  
  21. .HolyGrail-nav, .HolyGrail-ads {
  22.   /* 两个边栏的宽度设为12em */
  23.   flex: 0 0 12em;
  24. }
  25.  
  26. .HolyGrail-nav {
  27.   /* 导航放到最左边 */
  28.   order: -1;
  29. }
如果是小屏幕，躯干的三栏自动变为垂直叠加：
  1. @media (max-width: 768px) {
  2.   .HolyGrail-body {
  3.     flex-direction: column;
  4.     flex:;
  5.   }
  6.   .HolyGrail-nav,
  7.   .HolyGrail-ads,
  8.   .HolyGrail-content {
  9.     flex: auto;
  10.   }
  11. }
四、输入框的布局
 
我们常常需要在输入框的前方添加提示，后方添加按钮。
HTML代码如下：
  1. <div class="InputAddOn">
  2.   <span class="InputAddOn-item">...</span>
  3.   <input class="InputAddOn-field">
  4.   <button class="InputAddOn-item">...</button>
  5. </div>
CSS代码如下：
  1. .InputAddOn {
  2.   display: flex;
  3. }
  4.  
  5. .InputAddOn-field {
  6.   flex:;
  7. }
五、悬挂式布局
 
有时，主栏的左侧或右侧，需要添加一个图片栏。
HTML代码如下：
  1. <div class="Media">
  2.   <img class="Media-figure" src="" alt="">
  3.   <p class="Media-body">...</p>
  4. </div>
CSS代码如下：
  1. .Media {
  2.   display: flex;
  3.   align-items: flex-start;
  4. }
  5.  
  6. .Media-figure {
  7.   margin-right: 1em;
  8. }
  9.  
  10. .Media-body {
  11.   flex:;
  12. }
六、固定的底栏
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
HTML代码如下：
  1. <body class="Site">
  2.   <header>...</header>
  3.   <main class="Site-content">...</main>
  4.   <footer>...</footer>
  5. </body>
CSS代码如下：
  1. .Site {
  2.   display: flex;
  3.   min-height: 100vh;
  4.   flex-direction: column;
  5. }
  6.  
  7. .Site-content {
  8.   flex:;
  9. }
七，流式布局
每行的项目数固定，会自动分行。
CSS的写法：
  1. .parent {
  2.   width: 200px;
  3.   height: 150px;
  4.   background-color: black;
  5.   display: flex;
  6.   flex-flow: row wrap;
  7.   align-content: flex-start;
  8. }
  9.  
  10. .child {
  11.   box-sizing: border-box;
  12.   background-color: white;
  13.   flex: 0 0 25%;
  14.   height: 50px;
  15.   border: 1px solid red;
  16. }
 
头部固定的flex布局：
  1. <body>
  2. <header>我是头部</header>
  3. <section>我是内容区</section>
  4. </body>
  1. body{
  2. display:flex;
  3. flex-direction: column;
  4. width: 100%;
  5. height: 100%;
  6. header{
  7. height: 50px;
  8. }
  9. section{
  10. flex:;
  11. height:;
  12. overflow-y: scroll;
  13. -webkit-overflow-scrolling: touch;
  14. }
  15. }
 
 
 
 

二、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. js高级程序设计 笔记 --- 面向对象的程序设计

    1,理解对象 通过对象字面量的方式,创建一个对象,为它添加属性和方法: var obj = { a: 1, b:2, sayA(){ console.log(this.a)}} 1,属性类型: 数据属 ...

  2. request.upload.addEventListener in not a function。

    本人在使用vue开发一套后台系统时,碰到了一个上传文件的需求,因为平时做的上传是使用ajax的方式来进行上传. 现在是使用axios来进行上传,方式没有什么改变: npm i  axios  直接上 ...

  3. GCC 7.3.0版本编译http-parser-2.1问题

    http-paser是一个用c编写的http消息解析器,地址:https://github.com/nodejs/http-parser,目前版本2.9 今天用gcc 7.3.0编译其2.1版本时,编 ...

  4. 更改kindeditor编辑器，改用支持h5的video标签替换原有embed标签

    kindeditor是一款不错的可视化编辑器,不过最近几年似乎没在更新,现在h5趋于主流,正好有个业务需要编辑器支持mp4视频的播放,考虑到现在h5中的video标签的强大,于是决定将原来系统中的em ...

  5. PCB中的SOLD MASK和阻抗开窗

    应用场合:1 PCB中的贴片的焊盘是不过油的,需要暴露出来用于焊接:对于电机驱动需要大电流的走线需要将走线保留暴露出来不过油,然后在上面走一层锡,增大锡箔,铜箔厚度,增大过流和防过热能力. 方法:先在 ...

  6. XML 十六进制值 是无效的字符错误 解决方法之一 转

    /// <summary> /// 过滤非打印字符 /// </summary> /// <param name="tmp">待过滤</p ...

  7. DB2 锁问题的监控和解决

    常见的锁问题包括: 锁等待 锁超时 锁升级 死锁 而根据问题的特性通常分为两种: 实时事件:问题正在发生 历史事件:问题已经过去 如果实时事件,DBA 可以通过查看表信息.GET SNAPSHOT 或 ...

  8. Python数据类型（元组）

    文章内容参考了教程:http://www.runoob.com/python/python-basic-syntax.html#commentform Python 元组 Python的元组与列表类似 ...

  9. Monkey入门之如何在android虚拟机中安装apk包

    如果想把公司的产品apk包安装到android虚拟机中,应该进行如下操作: 1.首先将apk包放到C:\Program Files\Android\android-sdk\platform-tools ...

  10. 更新jdk后 Light Table无法找到新版本jdk的bin目录

    原来是lein构建工具中保存了原来jdk版本记录,就是这个profiles文件 原来jdk1.7.0_17 我现在改成如下图jdk1.7.0_40 问题解决