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

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. 从零搭建Window前端开发环境

    前言 作为一个小前端,是否因为搭建环境烦恼过,是否因为npm等国外镜像踩坑过,不要怕,接下来跟着我一步步搭建适合自己的开发环境吧!!! node 这个不用说了吧,我们经常和他打交道,无论是 gulp. ...

  2. 记一次discuz修改首页图片路径问题

    1.找到图片路径拼装文件 首先打开根目录下的template目录找到首页文件 打开后找到图片列表的拼装位置 // 链接示例: <!--{eval $imagelistkey = getforum ...

  3. 纯正中文版本pi-star系统下载

    基于3.4.17修改(稳定,发热量少) 不支持RPI 4 a/b+ 完美支持树莓派0,1,2,3 默认刷好卡,启动已经设置好所有参数(选好TFT屏幕,调制解调器类型GPIO,打开了DMR服务器(460 ...

  4. 2.Go--hello world

    编写一个hello world package main import ( "fmt" "time" ) func main(){ fmt.Println(&q ...

  5. 58同城Java面试

    总结这一次面试失败的不冤 很多知识,都是了解.知道,而没有做到明白与彻底的弄懂 差距还是比较大的 以后要多来写总结,提升自己,争取早日被认可 说说今天面试的主要内容和问题吧 希望大家集思广益 面试职位 ...

  6. 【华为云技术分享】数据库开发：MySQL Seconds_Behind_Master简要分析

    [摘要]对于mysql主备实例,seconds_behind_master是衡量master与slave之间延时的一个重要参数.通过在slave上执行"show slave status;& ...

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

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

  8. Codeforces Round #648 (Div. 2)

    链接 : https://codeforces.com/contest/1365/problems problem A 统计可用的行和列的最小值, 模2输出即可 /* * Author: RoccoS ...

  9. JSONobject按照put顺序存储和读取

    new的时候加true即可: JSONObject jsonObject = new JSONObject(true);

  10. css在 IE8下的兼容性

    常用伪类选择器   IE7 IE8 IE9 :hover √ √ √ :focus × √ √ :first-child √ √ √ :last-child × × √ :first-of-type ...