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

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. 用struts的action运行jsp页面

    struts是开源框架.使用Struts的目的是为了帮助我们减少在运用MVC设计模型来开发Web应用的时间.如果我们想混合使用Servlets和JSP的优点来建立可扩展的应用,struts是一个不错的 ...

  2. 安装并配置Samba

    1. 安装 samba ~$sudo apt-get install samba 2. 修改 samba 的配置文件 ~$sudo gedit /etc/samba/smb.conf 添加如下内容 [ ...

  3. 网页元素居中的n种方法

    导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...

  4. 电脑中找不到.ssh文件的解决办法

    打开GIT bash写上命令:1.git config --global user.name “XXX”xxx代表你的用户名 2.git config --global user.email &quo ...

  5. Python基础002---基础知识

    一.标识符 标识符是自己定义的,是开发人员在程序中自己定义的一些符号和名称,如变量名.函数名等.在 Python 里,标识符由字母(区分大小写).数字.下划线组成,且数字不能开头.常用的命名方法有小驼 ...

  6. cb29a_c++_STL_算法_查找算法_(2)search_n

    cb29a_c++_STL_算法_查找算法_(2)search_n//比如:连续查找连续的n个8search_n(b,e,c,v),迭代器b,begin(),e,end().连续的c个vpos=sea ...

  7. 关于margin外边距合并的问题

    一 .兄弟元素margin外边距合并演示   当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...

  8. MySQL的使用方法和视图、索引、以及存储过程的一些简单方法

    一,基本概念 1, 常用的两种引擎:         (1) InnoDB        a,支持ACID,简单地说就是支持事务完整性.一致性:         b,支持行锁,以及类似ORACLE的一 ...

  9. git 的使用：

    git  的官方网址是: https://git-scm.com/downloads github 的官方网址: https://github.com/ git 的原理图: git 和 github ...

  10. 最通俗易懂的RSA加密解密指导

    前言 RSA加密算法是一种非对称加密算法,简单来说,就是加密时使用一个钥匙,解密时使用另一个钥匙. 因为加密的钥匙是公开的,所又称公钥,解密的钥匙是不公开的,所以称为私钥. 密钥 关于RSA加密有很多 ...