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

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

box

高度貌似不一样，有高手看到，求解释

关于display的box和flex布局的更多相关文章

  1. 3.说一下你了解的弹性FLEX布局.

    页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS ...

  2. 一劳永逸的搞定 flex 布局

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...

  3. CSS中的flex布局

    1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 ...

  4. 学好Flex布局并不容易

    1. Flex布局介绍 CSS的传统布局解决方案,基于盒状模型,依赖display属性.position属性.float属性,对于一些特殊的布局,例如垂直居中,往往要想很多hack的方法来解决. 20 ...

  5. 解读Flex布局及其基本使用

    Flex布局的基本内容: felx布局意为"弹性布局",主要用于为盒状模型提供最大的灵活性.被广泛的应用于移动端,PC端的响应式布局. 首先:定义盒子为flex布局: .box{ ...

  6. 弹性FLEX布局

    页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS ...

  7. flex布局个人总结

    <html> <div class="box1"> <span>1</span> <span>2</span> ...

  8. 布局display属性(一)--【Flex】

    一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...

  9. 【分享】谈CSS3中display属性的flex布局

    最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*fl ...

随机推荐

  1. vi命令总结

    VI常用技巧 ​ VI命令可以说是Unix/Linux世界里最常用的编辑文件的命令了,但是因为它的命令集众多,很多人都不习惯使用它,其实您只需要掌握基本命令,然后加以灵活运用,就会发现它的优势,并会逐 ...

  2. STL常用序列容器

    这里简要的记述一下STL常用容器的实现原理,要点等内容. vector vector是比较常用的stl容器,用法与数组是非类似,其内部实现是连续空间分配,与数组的不同之处在于可弹性增加空间,而arra ...

  3. 第03组 Alpha(2/4)

    队名:不等式方程组 组长博客 作业博客 团队项目进度 组员一:张逸杰(组长) 过去两天完成的任务: 文字/口头描述: 制定了初步的项目计划,并开始学习一些推荐.搜索类算法 GitHub签入纪录: 暂无 ...

  4. 关于cronExpression表达式

    spring 定时任务设置,关于cronExpression表达式: 字段 允许值 允许的特殊字符 秒 0-59 , - * / 分 0-59 , - * / 小时 0-23 , - * / 日期 1 ...

  5. 64位手机无法加载x5(libmttwebview.so is 32-bit instead of 64-bit)

    x5内核暂时不提供64位的so文件,在64位手机上需要让AP以32位模式运行. 具体操作如下: 1.如果使用是Eclipse则需要将所有的.so文件都放置在so加载目录:lib/armeabi文件夹下 ...

  6. 解决GITLAB无法启动runsv no running

    可以先尝试用 systemctl start gitlab-runsvdir.service 如果冻结不动的话,就需要查看系统服务项了 systemctl -t target 如果系统正常的话,所有任 ...

  7. 用字典优化过长的if 语句

    如果代码中,if 语句,后面elif 过多,完全可以用字典来优化代码. def response(method): if method == "POST": return &quo ...

  8. Linux下，如何监控某个进程到底向哪个地址发起了网络调用

    Linux下,如何监控某个进程到底向哪个地址发起了网络调用 有时候,有些应用,比如idea,你发起某个操作时,其底层会去请求网络,获取一些数据. 但是不知道,请求了什么地址.举个例子,在idea中,m ...

  9. Mybatis各语句高级用法(未完待续)

    更多的语法请参考官网 http://www.mybatis.org/mybatis-3/dynamic-sql.html# 环境:MySQL5.6,jdk1.8 建议:所有的参数加上@Param re ...

  10. 2、尚硅谷_SSM高级整合_创建Maven项目.avi

    第一步我们新建立一个web工程 这里首先要勾选上enable的第一个复选框 这里要勾选上add maven support 我们在pom.xml中添加sevlet的依赖 创建java web项目之后, ...