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

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. Spring AOP概念及作用

    一:SpringAOP概念 面向切面编程(Aspect Oriented Programming)提高了另一种角度来思考程序的结构,通过预编译方式和运行期间的动态代理实现程序功能的统一维护的一种技术. ...

  2. Babel 7 安装与配置

    Babel:帮我们把高级的语法(ES6)转为低级的语法 /*    Babel 7.x版本  安装如下 (cnpm i @babel/cli -D)                     //Bab ...

  3. ubuntu下Vivado launch SDK后，SDK无菜单栏解决办法

    最近在调Xilinx的ZYNQ 7015,按照教程从Vivado中Launch SDK后遇到了个问题,SDK的菜单栏消失了,真的没了,我的环境是ubuntu 16.4.百度好久都没有人遇到该问题,经过 ...

  4. iOS－Reactive Cocoa的常见用法

    今天是周末,临近年底,工作上遇到不可抗力,会有点一些变动!这多少会让人有一点静不下来,但需克制,Reactive Cocoa是今天的主角! 废话不多说,今天聊聊Reactive Cocoa的常见使用! ...

  5. TensorFlow从0到1之TensorFlow实现简单线性回归（15）

    本节将针对波士顿房价数据集的房间数量(RM)采用简单线性回归,目标是预测在最后一列(MEDV)给出的房价. 波士顿房价数据集可从http://lib.stat.cmu.edu/datasets/bos ...

  6. 代码规范与计划(Beta阶段)

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 Beta冲刺 这个作业的目标 代码规范与计划 作业正文 如下 其他参考文献 代码规 ...

  7. 一、Jenkins 安装(自动构建发布)

    war 包方式安装 官方下载地址:https://jenkins.io/download/ ,下载war包,并上传到服务器(案例中是把war包放在了 /usr/local/jenkins 里面) 运行 ...

  8. Java前端面试题总结

    Java前端面试题总结 简单说一下HTML,CSS,javaScript在网页开发中的定位? HTML:超文本标记语言,定义网页的结构 CSS:层叠样式表,用来美化页面 JavaScript:主要用来 ...

  9. v-forv-for指令的三种使用方法

    1.迭代数组 <p v-for="(item,i) in list">id:{{item.id}}---名字:{{item.name}}---索引{{item.age} ...

  10. HttpClient优化

    HttpClient优化思路: 1.池化 2.长连接 3.httpclient和httpget复用 4.合理的配置参数(最大并发请求数,各种超时时间,重试次数) 5.异步 6.多读源码 1.背景我们有 ...