flexbox简介及浏览器兼容情况说明

责编:menVScode 2017-06-26 23:38 阅读(530)

        1、flexbox简介

         flexbox是一种新的布局方式,这种布局方式是2009年W3C提出的方案。它可以简便,完整,完成页面的布局。

        传统布局解决方案,基于盒状模型,依赖display属性、position属性、float属性。它对那些特殊的布局非常不方便,比如,垂直剧中就不容易实现。flex布局将成为未来布局的首选方案。

        flex布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器的项目布局,即使他们的大小是未知或者是动态的。

        flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。flex容器会使子项目(伸缩项目)扩展来填满可用空间,或者缩小他们以防止溢出容器。

QQ截图20170626232959

        

        2、flexbox布局浏览器兼容情况

        在这里给大家推荐个比较实用的网站:http://caniuse.com/,如果你不清楚某个css3属性兼容情况,你就这个用这个浏览器来查看。下面来看下flexbox布局的兼容性:

QQ截图20170626233633

        现在IE浏览器,不提也摆,只支持IE11版本。其中主流浏览器最新版本都是flexbox布局,让我们欣慰的是安卓4.4以上版本都支持了,也就是不管现在多老的手机基本都支持了flexbox的布局。也就是说现在手机端完全可以放心使用,可以给我们节省很多很多的时间。如果是pc端浏览器的话,那还是多花点精力,别给自己找麻烦。

        Flexbox 的盒子模型,根据 W3C 文章所描述,flex 的盒子模型如下图所呈现,与一般的盒子模型不同的地方,在于 Flexbox 的盒子模型具有水平的起点与终点 ( main start、main end ),垂直的起点与终点 ( cross start、cross end ),水平轴与垂直轴 ( main axis、cross axis ),然后元素具有水平尺寸与垂直尺寸 ( main size、cross size ),这些都是相当重要的布局规画。

QQ截图20170627201444

        flexbox布局的外层容器要写样式:display:block,块级元素和行内元素都能采用flexbox布局。flexbox布局的优势:

        1、把计算交给浏览器去完成,适配给智能;

        2、布局简单容易,更多的屏幕区域被我们利用;

        例子一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.main{display: flex;display:-webkit-flex;}/*外层容器一定得添加display: flex*/
		.yellow{background: yellow;width: 200px;min-width: 100px;flex:intial;}/*设置最大宽度200,最小为100*/
		.blue{background: blue;width: 200px;flex:none;}/*固定200*/
		.red{background: red;flex:2;}/*剩余宽度部分取2份*/
		.gray{background: gray;flex:1;}/*剩余宽度部分取1份*/
	</style>
</head>
<body>
	<div class="main">
		<p class="yellow">yellow</p>
		<p class="blue">blue</p>
		<p class="red">red</p>
		<p class="gray">gray</p>
	</div>
</body>
</html>

        例子二

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.main{display: flex;display:-webkit-flex;min-width: 320px;}
		.box{padding: 5px;}
		.box img{width: 100%;}
	</style>
</head>
<body>
	<div class="main">
		<div class="box">
			<img src="http://www.menvscode.com/upload/26201823040586025.jpg" alt="">
		</div>
		<div class="box">
			<img src="http://www.menvscode.com/upload/26201823040586025.jpg" alt="">
		</div>
		<div class="box">
			<img src="http://www.menvscode.com/upload/26201823040586025.jpg" alt="">
		</div>
	</div>
</body>
</html>
标签: flexbox flex css3
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码