当前阅读教程:Flex Box语法教程 > Flex Box概要和入门 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Flex BOX概要入门 | 下一篇: 表单的简单布局 |
Flex 布局是什么 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器,必须加上-webkit前缀。 .box{ display: flex; display: -webkit-flex; /* Safari */ }
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。 下面是我们的第一个实例代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Flex Box </title> <style> .rongqi{ display:flex; display:-webkit-flex; width:400px; height:400px; background:#CCC; } .xiangmu{ background-color:#F93; width:100px; height:100px; margin: 10px; } </style> </head> <body> <div> <div>01</div> <div>02</div> <div>03</div> </div> </body> </html> |
|
上一篇: Flex BOX概要入门 | 下一篇: 表单的简单布局 |