flexbox之前有接触，写项目时也用过，但也只是简单的，对其也是似懂非懂，所以今天下定决心把这个再学一遍，因为似懂非懂就是不懂

　　本文主要是的demo演示，想看flexbox语法 请移步flexbox语法

　　本文主要分两大部分：flexbox的Demo与常见的布局

　　以下demo的图片与css代码从左至右从上到下一一对应

　　flexbox的Demo

　　单元素demo四个角

　　

　　html

  1.   <div class='box-1'>
  2.     <span>一</span>
  3.    </div>

　　css

  1.        .box-1{
  2.        /* 一个元素 */
  3.        左上角
  4.        display: flex;
  5.       /* 右上角 */
  6.        justify-content: flex-end;
  7.       /* 左下角 */
  8.        align-items: flex-end;
  9.       /* 右下角 */
  10.        justify-content: flex-end;
  11.        align-items: flex-end;
  12.      }
　　单元素居中

　　　　       

　　html

  1.   <div class='box-1'>
  2.     <span>一</span>
  3.    </div>

　　css

  1.       .box-1{
  2.       /* 顶部水平居中 */
  3.        justify-content: center;
  4.       /* 左垂直居中 */
  5.        align-items: center;
  6.       /* 右垂直居中 */
  7.        justify-content: flex-end;
  8.        align-items: center;
  9.       /* 垂直和水平居中 */
  10.        justify-content: center;
  11.        align-items: center; */
  12.       /* 底部水平居中 */
  13.        justify-content: center;
  14.        align-items: flex-end;
  15.       }
　　二个元素对齐方式

　　html　

  1.   <div class='box-1'>
  2.     <span>一</span>
  3.      <span>二</span>
  4.    </div>

　　css

  1.   　　　.box-1{
  2.       /* 二个元素 */
  3.        display: flex;
  4.       /* 水平两端对齐，项目之间的间隔都相等*/
  5.        justify-content: space-between;
  6.       /* 左垂直两端对齐，项目之间的间隔相等  flex-direction: column ： 主轴为垂直方向，起点在上沿。*/
  7.        flex-direction: column;
  8.        justify-content: space-between;
  9.       /* 垂直居中两端对齐，项目之间的间隔相等 flex-direction: column ： 主轴为垂直方向，起点在上沿。align-items这时就代表水平方向*/
  10.        flex-direction: column;
  11.        justify-content: space-between;
  12.        align-items: center;
  13.       /* 右垂直两端对齐，项目之间的间隔相等 */
  14.        flex-direction: column;
  15.        justify-content: space-between;
  16.        align-items: flex-end;
  17.       /* 水平居中两端对齐，项目之间的间隔都相等 */
  18.        justify-content: space-between;
  19.        align-items: center;
  20.       /* 底部两端对齐，项目之间的间隔都相等 */
  21.        justify-content: space-between;
  22.        align-items: flex-end;
  23.       }
  24.       /* 两元素左对角对齐 */
  25.       .box-1{
  26.        justify-content: space-between;
  27.       }
  28.       span:nth-child(2){
  29.        align-self: flex-end;
  30.     }
　　三元素对齐

　　

　　html

  1.   <div class='box-1'>
  2.     <span>一</span>
  3.      <span>二</span>
  4.     <span>三</span>
  5.   <div>

　　css

  1.     .box-1{
  2.       /* 三元素左对角对齐 */
  3.       justify-content: space-between;
  4.       /* 倒三角 */
  5.       justify-content: space-between;
  6.     }
  7.     /* 三元素左对角对齐 */
  8.     span:nth-child(2){
  9.       align-self: center;
  10.     }
  11.     span:nth-child(3){
  12.       align-self: flex-end;
  13.     }
  14.     /* 倒三角 */
  15.     span:nth-child(2){
  16.       align-self: flex-end;
  17.     }
　　13个元素换行操作

　　html

  1.   <div class='box-1'>
  2.     <span>一</span>
  3.      <span>二</span>
  4.     <span>三</span>
  5.    <span>四</span>
  6.     <span>五</span>
  7.     <span>六</span>
  8.     <span>七</span>
  9.     <span>八</span>
  10.     <span>九</span>
  11.     <span>十</span>
  12.     <span>十一</span>
  13.     <span>十二</span>
  14.     <span>十三</span>
  15.   </div>

　　css

  1.     .box-1{
  2.       /* 十三元素换行操作 */
  3.       display: flex;
  4.       flex-wrap: wrap;
  5.       justify-content: flex-end;
  6.       align-content: space-between;
  7.     }
　　四个元素占满4个角

　html

  1.   <div class="box-2">
  2.     <div class="column">
  3.       <span>1</span>
  4.       <span>2</span>
  5.     </div>
  6.     <div class="column">
  7.       <span>3</span>
  8.       <span>4</span>
  9.     </div>
  10.   </div>

　　css

  1.     .box-2 {
  2.       float: left;
  3.       width: 400px;
  4.       height: 400px;
  5.       border: solid 1px black;
  6.       display: flex;
  7.       flex-wrap: wrap;
  8.       align-content: space-between;
  9.     }
  10.     .column {
  11.       flex-basis: 100%;
  12.       display:flex;
  13.       justify-content: space-between;
  14.  
  15.     }
  16.     .column span{
  17.       display: inline-block;
  18.       text-align: center;
  19.       color: #fff;
  20.       width: 80px;
  21.       height: 80px;
  22.       border-radius: 50%;
  23.       background-color: #000;
  24.     }
　　9元素水平和垂直平分容器

　　

　　html

  1. <div class="box-3">
  2.     <div class="row">
  3.       <span>1</span>
  4.       <span>2</span>
  5.       <span>3</span>
  6.     </div>
  7.     <div class="row">
  8.       <span>4</span>
  9.       <span>5</span>
  10.       <span>6</span>
  11.     </div>
  12.     <div class="row">
  13.       <span>7</span>
  14.       <span>8</span>
  15.       <span>9</span>
  16.     </div>
  17.   </div>

　　css

  1.     .box-3 {
  2.       width: 180px;
  3.       height: 190px;
  4.       border: solid 1px black;
  5.       display: flex;
  6.       flex-wrap: wrap;
  7.       align-items: center;
  8.     }
  9.     .row{
  10.       flex-basis: 100%;
  11.       display: flex;
  12.       justify-content: space-between;
  13.       flex:;
  14.     }
  15.     .box-3 span {
  16.       display: inline-block;
  17.       text-align: center;
  18.       color: #fff;
  19.       width: 50px;
  20.       height: 50px;
  21.       border-radius: 50%;
  22.       background-color: #000;
  23.     }

　　常见的布局

　

　　html

  1.     <h1>网格布局</h1>
  2.     <div class="grid grid1">
  3.       <div class="grid-cell u-lof2" >1/2</div>
  4.       <div class="grid-cell">auto</div>
  5.       <div class="grid-cell u-lof3">1/3</div>
  6.       <div class="grid-cell u-lof3">1/3</div>
  7.       <div class="grid-cell">auto</div>
  8.       <div class="grid-cell u-lof3">1/3</div>
  9.       <div class="grid-cell u-lof4">1/4</div>
  10.       <div class="grid-cell u-lof3">1/3</div>
  11.       <div class="grid-cell">auto</div>
  12.     </div>

　　css

  1.   .grid {
  2.     display: flex;
  3.     margin:30px auto;
  4.     width: 100%;
  5.     text-align: center;
  6.     border-radius:6px;
  7.     background-color: #eee;
  8.     box-shadow: 0 2px 10px 0 #111 ,
  9.                 insert 0 2px 0 0 #fff;
  10.   }
  11.   .grid .grid-cell{
  12.     margin: 10px;
  13.     height: 30px;
  14.     border-radius: 5px;
  15.     background-color: #454545;
  16.     line-height: 30px;
  17.     text-align: center;
  18.     color: #fff;
  19.   }
  20.   .grid1 {
  21.     display: flex;
  22.     flex-wrap: wrap;
  23.   }
  24.   .grid1 .grid-cell{
  25.     flex:;
  26.   }
  27.   .grid1 .u-lof2 {
  28.     flex:0 0 50%;
  29.   }
  30.   .grid1 .u-lof3{
  31.     flex: 0 0 33.333%;
  32.   }
  33.   .grid1 .u-lof4{
  34.     flex: 0 0 25%
  35.   }

　　html

  1.     <h1>圣杯布局</h1>
  2.     <div class="grid holy-grid">
  3.       <div class="header">header</div>
  4.       <div class="content">
  5.         <div class="nav">nav</div>
  6.         <div class="main">main</div>
  7.         <div class="ads">ads</div>
  8.       </div>
  9.       <div class="footer">footer</div>
  10.     </div>

　　css

  1.   .holy-grid {
  2.     display: flex;
  3.     flex-direction: column;
  4.   }
  5.   .holy-grid .header,
  6.   .holy-grid .footer{
  7.     flex:;
  8.     height: 40px;
  9.     background-color: #676767;
  10.     line-height: 40px;
  11.     color: #fff;
  12.   }
  13.   .holy-grid .header {
  14.     border-top-right-radius: 5px;
  15.     border-top-left-radius: 5px;
  16.   }
  17.   .holy-grid .footer {
  18.     border-bottom-left-radius: 5px;
  19.     border-bottom-right-radius: 5px;
  20.   }
  21.   .holy-grid .content{
  22.     display: flex;
  23.     flex:;
  24.     min-height: 300px;
  25.     line-height: 300px;
  26.   }
  27.   .holy-grid .nav,
  28.   .holy-grid .ads{
  29.     flex: 0 0 70px;
  30.   }
  31.   .holy-grid .main{
  32.     flex:;
  33.   }
  34.   .holy-grid .nav {
  35.     order:;
  36.     background-color: #a1a1a1;
  37.   }
  38.   .holy-grid .ads {
  39.     background-color: #d3d3d3;
  40.   }

　　html

  1.     <h1>悬挂式布局</h1>
  2.     <div class="Media">
  3.       <img src="./jr.png" alt="" class="Media-figure">
  4.       <div class="Media-body">
  5.         <p class="body-title">JR禁赛真正原因曝光：他向助教身上撒了一碗汤</p>
  6.         <div class="body-content">
  7.           腾讯体育讯（文/Brian Windhorst和Dave McMenamin，ESPN撰稿人） 北京时间3月3日，据ESPN报道，骑士后卫JR-史密斯被球队禁赛一场的原因曝光，原来是因为他向助理教练达蒙-琼斯身上撒了一碗汤。
  8.         </div>
  9.       </div>
  10.     </div>

　　css

  1.   .Media {
  2.     display: flex;
  3.     align-items: flex-start;
  4.  
  5.   }
  6.   .Media-figure {
  7.     margin-right: 1em;
  8.     width: 200px;
  9.     height: 100px;
  10.   }
  11.   .Media-body {
  12.     border-radius: 5px;
  13.     background-color: #eee;
  14.     flex:;
  15.     height: 100px;
  16.   }
  17.   .Media-body .body-title{
  18.     font-weight: bold;
  19.     margin:;
  20.   }
  21.   .Media-body .body-content {
  22.     margin:;
  23.   }

　　

　　注意：设置align-items属性时必须保证容器有高度　　　

  1. 　　　　.item {flex: 1;}
  2. 　　　　.item {
  3.    　　 　　flex-grow: 1;
  4.    　　　　 flex-shrink: 1;
  5.     　　　　flex-basis: 0%;
  6. 　　　　}
    　　　　这两者是等价的，三者含义见flexbox语法

　　

　　参考文献：

　　　　　　　https://codepen.io/lcc19941214/pen/vLdVNg

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

复习 | 彻底弄懂Flexbox之Demo篇的更多相关文章

  1. 30分钟彻底弄懂flex布局

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...

  2. 彻底弄懂JS的事件冒泡和事件捕获（不推荐阅读）

    由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...

  3. 彻底弄懂LSH之simHash算法

    马克·吐温曾经说过,所谓经典小说,就是指很多人希望读过,但很少人真正花时间去读的小说.这种说法同样适用于“经典”的计算机书籍. 最近一直在看LSH,不过由于matlab基础比较差,一直没搞懂.最近看的 ...

  4. SQL Server-聚焦NOLOCK、UPDLOCK、HOLDLOCK、READPAST你弄懂多少？（三十四）

    前言 时间流逝比较快,博主也在快马加鞭学习SQL Server,下班回来再晚也不忘记更新下博客,时间挤挤总会有的,现在的努力求的是未来所谓的安稳,每学一门为的是深度而不是广度,求的是知识自成体系而不是 ...

  5. 彻底弄懂AngularJS中的transclusion

    点击查看AngularJS系列目录 彻底弄懂AngularJS中的transclusion AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个 ...

  6. Golang， 以 9 个简短代码片段，弄懂 defer 的使用特点

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  7. 一文弄懂神经网络中的反向传播法——BackPropagation【转】

    本文转载自:https://www.cnblogs.com/charlotte77/p/5629865.html 一文弄懂神经网络中的反向传播法——BackPropagation   最近在看深度学习 ...

  8. 弄懂flex布局

    目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...

  9. [转]js模块化编程之彻底弄懂CommonJS和AMD/CMD！

    原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------ ...

随机推荐

  1. offset range 查询

    offset range 查询 我们在实际使用过程中经常需要查询某个topic的某分区的offset的range 命令行: kafka-run-class.sh kafka.tools.GetOffs ...

  2. 浏览器自动化的一些体会11 webclient的异步操作

    原来的代码大致如下: private void foo(string url) { using (WebClient client = new WebClient()) { client.Downlo ...

  3. Nginx同时支持Http和Https

    现在的网站支持Https几乎是标配功能,Nginx能很好的支持Https功能.下面列举一个配置同时支持Http和Https的功能. 需要注意的是:既然选择使用Https,就是为了保证通信安全,那么就没 ...

  4. 《Java从入门到失业》第二章：Java环境（四）：IDE集成环境

    2.4IDE集成环境 在掌握了编写.编译和运行Java程序的基本步骤以后,你肯定就在想,这太麻烦了,有没有更好的工具?当然有了,那就是IDE.IDE就是专业的集成开发环境(Integrated Dev ...

  5. linux驱动之jiffies的理解

    本文主要借鉴了http://blog.csdn.net/allen6268198/article/details/7270194,非常感谢该网友的分享. 在LINUX的时钟中断中涉及至二个全局变量一个 ...

  6. Quartz：基本用法总结

    OpenSymphony所提供的Quartz是任务调度领域享誉盛名的开源框架.Spring提供了集成Quartz的功能,可以让开发人员以更面向Spring的方式创建基于Quartz的任务调度应用.任务 ...

  7. 利用python爬取贝壳网租房信息

    最近准备换房子,在网站上寻找各种房源信息,看得眼花缭乱,于是想着能否将基本信息汇总起来便于查找,便用python将基本信息爬下来放到excel,这样一来就容易搜索了. 1. 利用lxml中的xpath ...

  8. 【转】Python进度条tqdm的使用

    有时候在使用Python处理比较耗时操作的时候,为了便于观察处理进度,这时候就需要通过进度条将处理情况进行可视化展示,以便我们能够及时了解情况.这对于第三方库非常丰富的Python来说,想要实现这一功 ...

  9. latex:数学式中的省略符号

    数学式中有很多省略符号,具体命令符号和用法如下 数学式中的省略符号 \cdots 水平位置与减号等高,例如$-\cdots +$,得到- … + \ddots 对角省略号,例如$A\ddots M$, ...

  10. Vue 构造选项 - 进阶

    Directive指令:减少DOM操作的重复 Vue实例/组件用于数据绑定.事件监听.DOM更新 Vue指令主要目的就是原生DOM操作 减少重复 自定义指令 两种声明方式 方法一:声明一个全局指令 V ...