一.行级元素可以用块级元素的方式显示,也可以同时具有两者的特点
下面的div没有运用浮动就可以并排显示
img { width: 100px; display: block; } div { width: 48%; border: 1px solid red; display: inline-block; /*width如果是行级元素就不生效 而这个就包含行级好块级特点*/ } </style> <title></title> </head> <body> <img src="../../img/diannao.jpg" alt=""/> <img src="../../img/diannao.jpg" alt=""/> <div>div1</div> <div>div2</div>
二.传统方式解决元素居中显示是件十分头疼的事,二使用灵活布局的话,就很便捷。
<style> #div1 { width: 200px; height: 200px; background: red; display: flex; /*水平轴上的对齐方式*/ justify-content: center; /*交叉轴上的对齐方式*/ align-items: center; } #div2 { width: 100px; height: 100px; background: yellow; } </style> <title>解决居中显示</title> </head> <body> <div id="div1"> <div id="div2"> </div> </div> </body>
三.实现浮动效果
<style> #container{ display: flex; /*flex-direction: row-reverse;*/ /*换行*/ /*flex-wrap:wrap;*/ } #left{ width: 20%; height: 100px; background-color: red; } #center{ width: 60%; height: 100px; background-color: yellow; } #right{ width: 20%; height: 100px; background-color: greenyellow; } #right2{ width: 20%; height: 100px; background-color: green; } </style> <title>实现浮动效果</title> </head> <body> <div id="container"> <div id="left">left</div> <div id="center">center</div> <div id="right">right</div> <!-- 因为默认值是不换行,所以right2已在一行--> <div id="right2">right</div> </div> </body>
四.解决双飞翼布局
<style> #container { display: flex; } #left{ width: 20%; height: 100px; background-color: red; order:1; } #center{ width: 60%; height: 100px; background-color: yellow; order:2; /*flex-shrink: 0;*/ } #right{ width: 20%; height: 100px; background-color: greenyellow; order:3; } </style> <title>解决双飞翼布局</title> </head> <body> <!--order order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。--> <div id="container"> <div id="center">center</div> <div id="left">left</div> <div id="right">right</div> </div> </body>
关于灵活布局的详细介绍可以查看这位大神的文章 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html