 |
位置：电子教程 > Flex Box语法教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > Flex Box语法教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：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概要入门 | 下一篇： 表单的简单布局 |
