理解:
css3 弹性盒( flexible box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
设置弹性盒子:
弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
实例:
完美解决居中问题
使用弹性盒子,居中变的很简单,只想要设置 margin: auto;
可以使得弹性子元素在两上轴方向上完全居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">perfect centering!</div>
</div>
</body>
</html>
效果:
如对本文有疑问, 点击进行留言回复!!
移动端适配布局(设备像素,独立像素和css像素的区别,以及自适应适配方案)
重定向方法sendRedirect()中的路径问题的初步了解
网友评论