关于display的box和flex布局

最新推荐文章于 2024-07-20 17:37:16 发布

weixin_33828101

最新推荐文章于 2024-07-20 17:37:16 发布

阅读量987

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/benchan2015/p/4776036.html

本文对比了Flex(2012年语法，无前缀版本)与Box(2009年语法，需加前缀)两种布局方式的差异。通过示例代码展示了Flex布局在现代浏览器中的应用，以及Box布局的过时之处。两者的运行效果对比显示了它们在高度处理上的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于二者的区别于联系，在知乎上看到有人这么回答的

flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。

box是2009年的语法，已经过时，是需要加上对应前缀的。

另外

flex demo代码

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title></title>
	<style>
		*{
			margin:0px;
			padding:0px;
			line-height:20px;
		}
		.test{
			margin:200px;
			width:500px;
			height:200px;
			background:green;
			display:flex;
			flex-flow: column nowrap;
			overflow:hidden;
		}
		.test div{
			overflow:hidden;
		}
		.test_c1{
			background:gray;
			height:60%;
			width:20%;
		}
		.test_c2{
			background:red;
			height:20%;
			width:20%;
		}
		.test_c3{
			background:blue;
			height:20%;
			width:100%;
		}
		
	</style>
  </head>
  <body>
	<div class='test'>
		<div class='test_c1'>abcdefghijklml</div>
		<div class='test_c2'>1234567890</div>
		<div class='test_c3'>aabbccddeeffgghhiijjkkllmmnnooppqqrrsstt</div>
	</div>
  </body>
</html>

box demo代码

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title></title>
	<style>
		*{
			margin:0px;
			padding:0px;
			line-height:20px;
		}
		.test{
			margin:200px;
			width:500px;
			height:200px;
			background:green;
			display:-webkit-box;
		  -webkit-box-orient: vertical  ;
			overflow:hidden;
		}
		.test div{
			overflow:hidden;
		}
		.test_c1{
			background:gray;
			width:20%;
		-webkit-box-flex:6;
		}
		.test_c2{
			background:red;
			width:20%;
			-webkit-box-flex:2;
		}
		.test_c3{
			background:blue;
			width:100%;
			-webkit-box-flex:2;
		}
		
	</style>
  </head>
  <body>
	<div class='test'>
		<div class='test_c1'>abcdefghijklml</div>
		<div class='test_c2'>1234567890</div>
		<div class='test_c3'>aabbccddeeffgghhiijjkkllmmnnooppqqrrsstt</div>
	</div>
  </body>
</html>

运行效果图

flex