本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。
一．垂直居中
这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式的差异。
1.1用margin实现垂直居中
实现方式：
父元素采用相对定位，子元素采用绝对定位，先将元素的定点定位到父元素的中心，再使用margin负值法，即子元素自身宽度、高度的一半，将其拉回到父元素的中心。
实现效果：
img
附上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中--normal</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 300px;
margin: 80px;
border: 1px solid blue;
position: relative;
}
.item {
width: 300px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
CSS实例详解：Flex布局
最新推荐文章于 2024-05-27 15:28:58 发布
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
