1.垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.  
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.         .box1 {
  16.             display: flex;
  17.             align-items: center;
  18.         }
  19.     </style>
  20. </head>
  21.  
  22. <body>
  23.     <div class="box1">
  24.         <span>dkfjkfdk</span>
  25.         <div>
  26.             <img src="img/1.png" alt="">
  27.         </div>
  28.  
  29.     </div>
  30. </body>
  31. </html>

　　

②.元素垂直平分剩余空间

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.  
  13.         #box {
  14.             height: 300px;
  15.             border: 1px solid black;
  16.             /*/*新版。*/
  17.             display: flex;
  18.             /*设置主轴方向为水平方向*/
  19.             flex-direction: column;
  20.             /*row 水平 和column 垂直
  21. 				/*以上为新版*/
  22.             /*旧版*/
  23.             /*display: -webkit-box;*/
  24.             /*设置主轴方向为水平方向*/
  25.             /*-webkit-box-orient: horizontal;*/
  26.             /*-webkit-box-orient: vertical;*/
  27.         }
  28.  
  29.         #box div {
  30.             width: 50px;
  31.             height: 50px;
  32.             background: red;
  33.             font-size: 40px;
  34.             color: #fff;
  35.             margin: auto;
  36.         }
  37.     </style>
  38. </head>
  39.  
  40. <body>
  41.     <div id="box">
  42.         <div>1</div>
  43.         <div>2</div>
  44.         <div>3</div>
  45.     </div>
  46. </body>
  47.  
  48. </html>

　　

③.水平居中

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.  
  13.         #box {
  14.             height: 300px;
  15.             border: 1px solid black;
  16.             /*/*新版。*/
  17.             /*display: flex;*/
  18.             /*设置主轴方向为水平，元素排列为反序*/
  19.             /*flex-direction: row-reverse;*/
  20.             /*新版反序从右侧开始*/
  21.             /*/////////////////////////////*/
  22.             /*设置主轴方向为垂直，元素排列为反序*/
  23.             /*flex-direction: column-reverse;*/
  24.             /*旧版*/
  25.             display: -webkit-box;
  26.             /*需要借助:设置主轴方向为水平方向，*/
  27.             /*-webkit-box-orient: horizontal;*/
  28.             /*新版反序从左侧开始*/
  29.             /*元素在主轴方向为反序*/
  30.             /*-webkit-box-direction: reverse;*/
  31.             /*/////////////////////////////*/
  32.             -webkit-box-orient: vertical;
  33.             -webkit-box-direction: reverse;
  34.         }
  35.  
  36.         #box div {
  37.             width: 50px;
  38.             height: 50px;
  39.             background: red;
  40.             font-size: 40px;
  41.             color: #fff;
  42.             margin: auto;
  43.         }
  44.     </style>
  45. </head>
  46.  
  47. <body>
  48.     <div id="box">
  49.         <div>1</div>
  50.         <div>2</div>
  51.         <div>3</div>
  52.  
  53.     </div>
  54. </body>
  55.  
  56. </html>

　　

④.水平方向富裕空间管理

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.  
  13.         #box {
  14.             height: 300px;
  15.             border: 1px solid black;
  16.             /*/*新版。*/
  17.             display: flex;
  18.             /*元素在主轴开始位置，富裕空间在主轴的结束位置*/
  19.             /*justify-content: flex-start;*/
  20.             /*元素在主轴结束位置，富裕空间在主轴开始位置*/
  21.             /*justify-content: flex-end;*/
  22.             /*元素在主轴中间，富裕空间在主轴两侧*/
  23.             /*justify-content: center;*/
  24.             /*富裕空间平均分配在每两个元素之间*/
  25.             justify-content: space-between;
  26.             /*广播体操一臂，平均分配在每个元素两侧*/
  27.             /* justify-content: space-around; */
  28.             /*旧版*/
  29.             /*display: -webkit-box;*/
  30.             /*元素在主轴开始位置，富裕空间在主轴的结束位置*/
  31.             /*-webkit-box-pack: start;*/
  32.             /*元素在主轴结束位置，富裕空间在主轴开始位置*/
  33.             /*-webkit-box-pack:end;*/
  34.             /*元素在主轴中间，富裕空间在主轴两侧*/
  35.             /*-webkit-box-pack:center;*/
  36.             /*富裕空间平均分配在每两个元素之间*/
  37.             /*-webkit-box-pack:justify;*/
  38.             /*没有广播体操*/
  39.         }
  40.  
  41.         #box div {
  42.             width: 50px;
  43.             height: 50px;
  44.             background: red;
  45.             font-size: 40px;
  46.             color: #fff;
  47.         }
  48.     </style>
  49. </head>
  50.  
  51. <body>
  52.     <div id="box">
  53.         <div>1</div>
  54.         <div>2</div>
  55.         <div>3</div>
  56.  
  57.     </div>
  58. </body>
  59.  
  60. </html>

　　

⑤.垂直方向富裕空间管理

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.  
  13.         #box {
  14.             height: 300px;
  15.             border: 1px solid black;
  16.             /*/*新版。*/
  17.             display: flex;
  18.             /*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
  19.             /*align-items: flex-start;*/
  20.             /*元素在侧轴开始结束，富裕空间在侧轴开始位置*/
  21.             align-items: flex-end;
  22.             /*元素在侧轴中间，富裕空间在侧轴开始位置*/
  23.             /*align-items:center;*/
  24.             /*根据侧轴上文字的基线对齐*/
  25.             /*align-items:baseline;*/
  26.             /*旧版*/
  27.             /* display: -webkit-box; */
  28.             /*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
  29.             /* -webkit-box-align: start; */
  30.             /*元素在侧轴开始结束，富裕空间在侧轴开始位置*/
  31.             /* -webkit-box-align: end; */
  32.             /*元素在侧轴中间，富裕空间在侧轴开始位置*/
  33.             /* -webkit-box-align:center; */
  34.         }
  35.  
  36.         #box div {
  37.             width: 50px;
  38.             height: 50px;
  39.             background: red;
  40.             font-size: 30px;
  41.             color: #fff;
  42.         }
  43.  
  44.         #box div:nth-child(2) {
  45.             line-height: 50px;
  46.         }
  47.     </style>
  48. </head>
  49.  
  50. <body>
  51.     <div id="box">
  52.         <div>1</div>
  53.         <div>2</div>
  54.         <div>3</div>
  55.         <div>4</div>
  56.     </div>
  57. </body>
  58.  
  59. </html>

　

⑥.元素弹性空间

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<style type="text/css">
  7. 			*{
  8. 				margin: 0;padding: 0;
  9. 			}
  10. 			#box{
  11. 				height: 300px;
  12. 				border: 1px solid black;
  13. 				/*/*新版。*/
  14. 				display: flex;
  15.  
  16. 				/*旧版*/
  17. 				/*display: -webkit-box;*/
  18.  
  19. 			}
  20. 			#box div{
  21. 				/*新版加给子级*/
  22. 				flex-grow: 1;
  23. 				/*计算:子元素的尺寸=盒子的尺寸*子元素的box-flex属性值*/
  24. 				-webkit-box-ordinal-group:1 ;
  25. 				width: 50px;
  26. 				height: 50px;
  27. 				background: red;
  28. 				font-size: 30px;
  29. 				color: #fff;
  30. 				border: 1px solid black;
  31. 			}
  32. 			#box div:nth-child(2){
  33. 				width: 100px;
  34. 				flex-grow:2;
  35. 			}
  36.  
  37. 		</style>
  38. 	</head>
  39. 	<body>
  40. 		<div id="box">
  41. 			<div>1</div>
  42. 			<div>2</div>
  43. 			<div>3</div>
  44. 			<div>4</div>
  45. 		</div>
  46. 	</body>
  47. </html>

　　

⑦.元素具体位置

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<style type="text/css">
  7. 			*{
  8. 				margin: 0;padding: 0;
  9. 			}
  10. 			#box{
  11. 				height: 300px;
  12. 				border: 1px solid black;
  13. 				/*/*新版。*/
  14. 				/*display: flex;*/
  15.  
  16. 				/*旧版*/
  17. 				display: -webkit-box;
  18.  
  19. 			}
  20. 			#box div{
  21. 			/**/
  22. 				-webkit-box-ordinal-group:1 ;
  23. 				width: 50px;
  24. 				height: 50px;
  25. 				background: red;
  26. 				font-size: 30px;
  27. 				color: #fff;
  28. 				border: 1px solid black;
  29. 			}
  30. 			#box div:nth-child(1){
  31. 				/*数值越小越靠前，可以接受0或负值*/
  32. 				/*order:4;*/
  33. 				/*老版*/
  34. 				/*数值越小越靠前，可以接受0或负值*/
  35. 				-webkit-box-ordinal-group:3 ;
  36. 			}
  37. 				#box div:nth-child(2){
  38. 			/*order: 2;*/
  39. 			/*老版*/
  40. 			-webkit-box-ordinal-group:3 ;
  41. 			}
  42. 				#box div:nth-child(3){
  43. 				/*order: 3;*/
  44. 				/*老版*/
  45. 				-webkit-box-ordinal-group:-2 ;
  46. 			}
  47. 				#box div:nth-child(4){
  48. 				/*order: 1;*/
  49. 				/*老版*/
  50. 				-webkit-box-ordinal-group:1 ;
  51. 			}
  52.  
  53. 		</style>
  54. 	</head>
  55. 	<body>
  56. 		<div id="box">
  57. 			<div>1</div>
  58. 			<div>2</div>
  59. 			<div>3</div>
  60. 			<div>4</div>
  61. 		</div>
  62. 	</body>
  63. </html>

　　

　⑧.文字垂直居中

  1. .activity {
  2.     display: flex;
  3.     flex-direction: column;
  4.     justify-content: center
  5. }
  6.  
  7. <div class="activity">
  8.                         活动
  9. </div>

文字垂直居中

flex 弹性盒模型的一些例子；的更多相关文章

  1. Flex 弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Web的Flex弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  4. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  5. box flex 弹性盒模型（转载）

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  6. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

  7. flex弹性盒模型

    flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置floa ...

  8. 彻底弄懂css3的flex弹性盒模型

    由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...

  9. Flex弹性盒模型（新老版本完整）--移动端开发整理笔记（二）

    Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...

随机推荐

  1. 后端程序员之路 41、BlockingQueue

    BlockingQueue,阻塞队列,常用于实现生产者和消费者模型特点:1.队列为空时,取操作会等到队列有数据2.队列满时,存操作会等到队列可用 基于C++11的阻塞队列简单实现 - Cynric 的 ...

  2. 图文详解：阿里宠儿【小兔】RabbitMQ的养成攻略

  3. gRPC在 ASP.NET Core 中应用学习

    一.gRPC简介: gRPC 是一个由Google开源的,跨语言的,高性能的远程过程调用(RPC)框架. gRPC使客户端和服务端应用程序可以透明地进行通信,并简化了连接系统的构建.它使用HTTP/2 ...

  4. windows 下使用vargant 搭建虚拟机服务

    使用vagrant 下载 vagrant[https://www.vagrantup.com/downloads.html] 下载管理工具VirtualBox[https://www.virtualb ...

  5. 一起来学习LiteOS中断模块的源代码

    摘要:本文带领大家一起剖析了LiteOS中断模块的源代码. 本文我们来一起学习下LiteOS中断模块的源代码,文中所涉及的源代码,均可以在LiteOS开源站点https://gitee.com/Lit ...

  6. 单链表及基本操作（C语言）

    #include <stdio.h> #include <stdlib.h> /** * 含头节点单链表定义及基本操作 */ //基本操作函数用到的状态码 #define TR ...

  7. PTE 准备之 Read aloud

    Read aloud A text appears on screen.Read the text aloud rext up tp 60 words varies by task, dependin ...

  8. CSS篇-dispaly、position、定位机制、布局、盒子模型、BFC

    display常用值 参考链接英文参考链接中文 // 常用值 none:元素不显示 inline:将元素变为内联元素,默认 block:将元素变为块级元素 inline-block:将元素变为内联块级 ...

  9. go-echarts 入门安装和使用

    在 Golang 这门语言中,目前数据可视化的第三方库还是特别少,go-echarts的开发就是为了填补这部分的空隙.Echarts是百度开源的非常优秀的可视化图表库,凭借着良好的交互性,精巧的图表设 ...

  10. Cai Xukun and Orz Pandas Gym - 102309C

    题目链接:https://vjudge.net/problem/Gym-102309C 题意:给定蔡徐坤投篮的位置和篮筐的位置以及最大初速度,求一个初速度和时间. 思路:一开始我以为要用到二分,后面仔 ...