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

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. 【工作Vlog】Jmeter响应结果乱码解决方案

    资料:https://blog.51cto.com/ydhome/1864340 方法一:使用后置控制器"Beanshell PostProcessor"(动态修改,灵活) 添加后 ...

  2. 游戏开发之UI管理器(跨引擎)

    使用UI管理器的目的 使用单场景与zindex结合的方式管理UI. 能够隐藏底层UI达到优化效果. 很好的组织和管理UI. 跨引擎使用. 管理器分类 根据以往经验我开发了三种类型的管理器,队列管理器, ...

  3. KVM NAT(网络地址转换模式)

    NAT(网络地址转换模式) 使用NAT模式,就是让虚拟系统借助NAT(网络地址转换)功能,通过宿主机器所在的网络来访问公网.也就是说,使用NAT模式可以实现在虚拟系统里访问互联网.很显然,如果你只有一 ...

  4. [寒假学习]ps知识

    小学就开始学了,还是要感谢当时年轻不懂事到处研究怎么画画哈哈哈哈,不过到现在有点忘,寒假在家禁足也无聊,寻思着重拾画笔来着,复习一下,冲! 为了防止看完就忘用博客记录一下小笔记   1. 一些快捷键的 ...

  5. .Net Core WebAPI + Axios +Vue 实现下载与下载进度条

    故事的开始 老板说:系统很慢,下载半个小时无法下载,是否考虑先压缩再给用户下载? 本来是已经压缩过了,不过第一反应应该是用户下的数量多,导致压缩包很大,然后自己测试发现,只是等待的时间比较久而已,仍然 ...

  6. [Web][学习随笔]Session&cookie

    Session 从登录建立连接到退出就是一次会话.Session数据就会在会话期间用户存在服务器端的数据.这样,当用户在Web页之间跳转时,存储在Session对象中的变量将不会丢失,而是在整个用户会 ...

  7. Python第三方库 - 安装

    目录 1. 代码格式化 1.1. autopep8 1.2. YAPF 1.3. docformatter 2. 视觉相关 2.1. pyzbar, 条码(二维码)识别 2.2. tesserocr ...

  8. MQ系列（0）——MQ简介

    mq简介 mq 就是消息队列(Message Queue).想必大家对队列的数据结构已经很熟悉了,消息队列可以简单理解为:把要传输的数据放在队列中,mq 就是存放和发送消息的这么一个队列中间件.在消息 ...

  9. WPS2016ProPlus_normal 安装包+序列号

    WPS OFFICE 2016 安装 链接:https://pan.baidu.com/s/1dfjNFDxcl1n2fvYTt9c86A 提取码: ij8e 下载解压:.txt是序列号,.exe是安 ...

  10. Java中的四种引用方式

      无论是通过引用计数算法判断对象的引用数量,还是通过可达性分析算法判断对象的引用链是否可达,判定对象是否存活都与"引用"有关.在Java语言中,将引用又分为强引用.软引用.弱引用 ...