什么是Flexbox

2018-01-02 11:42:32
admin
1227
最后编辑:admin 于 2018-05-22 14:11:35
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
Flex 布局将成为未来布局的首选方案。
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex; } 
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex; } 


Webkit 内核的浏览器,必须加上-webkit前缀。

.box{ 
display: -webkit-flex; 
/* Safari */ 
display: flex; 
} 


注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

案例:水平垂直居中Flexbox布局

使用flex布局,无需绝对定位等改变布局的操作,可以轻松实现元素的水平垂直居中。

核心代码如下:

#container{
    display:flex;
    justify-content:center;
    align-items:center;
}



<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>垂直居中Demo</title>
	</head>
<style>
#container{
	height:300px;
	background:#d6d6d6;
	display:flex;
	justify-content:center;
  align-items: center;
}

#center{
	width:100px;
	height:100px;
	background-color:#666;
	color:#fff;
	font-weight:bold;
	font-size:18px;
	
	display:flex;		/*这个写在这只是为了#center这几个字的垂直居中*/
	justify-content:center;
  align-items: center;
}
</style>
	<body>
	<div id='container'>
		<div id = 'center'>#center</div>
	</div>
		
	</body>
</html>
尝试一下 »



  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227