flex布局学习（一）

最新推荐文章于 2025-08-19 23:37:24 发布

转载最新推荐文章于 2025-08-19 23:37:24 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tenyear/p/flex1.html

本文介绍如何使用Flex布局实现元素在div容器中的水平垂直居中，并展示了一个实际案例。此外，还讨论了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