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 ...