位置:电子教程 > Flex Box语法教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Flex BOX概要入门
Flex Box容器的属性
Flex项目的属性
当前阅读教程: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 布局以后,子元素的floatclearvertical-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概要入门 下一篇: 表单的简单布局
毕业设计网             广告联系QQ:45157718(微信同号)