flex布局学习(一)

1 可以轻松实现 在div中 水平垂直 方向上的居中

2可以动态的自适应屏幕高宽的响应式显示布局

3现在技术成熟了,使用比较灵活,兼容性也很好了 IE8和以下不支持

4做移动端网页比较好用

 

知识点 display: flex; margin:auto 其他的都时修饰

第一个案例 居中显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex 水平垂直居中</title>
<style type="text/css">
.container{display: flex;border: 1px solid red;background-color: #ffff;height: 200px;width: 200px;}
.item{background: #f2f2f2;border: 1px solid red;width:50px ;height: 50px;margin: auto;}
</style>
</head>

<body>
<div class="container">
<div class="item">

</div>
</div>
</bod

 

posted @ 2017-01-01 22:10  新手学习中  阅读(238)  评论(0编辑  收藏  举报