关于display的box和flex布局
关于二者的区别于联系，在知乎上看到有人这么回答的
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布局的更多相关文章
- 3.说一下你了解的弹性FLEX布局.
页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS ...
- 一劳永逸的搞定 flex 布局
一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...
- CSS中的flex布局
1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 ...
- 学好Flex布局并不容易
1. Flex布局介绍 CSS的传统布局解决方案,基于盒状模型,依赖display属性.position属性.float属性,对于一些特殊的布局,例如垂直居中,往往要想很多hack的方法来解决. 20 ...
- 解读Flex布局及其基本使用
Flex布局的基本内容: felx布局意为"弹性布局",主要用于为盒状模型提供最大的灵活性.被广泛的应用于移动端,PC端的响应式布局. 首先:定义盒子为flex布局: .box{ ...
- 弹性FLEX布局
页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS ...
- flex布局个人总结
<html> <div class="box1"> <span>1</span> <span>2</span> ...
- 布局display属性(一)--【Flex】
一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...
- 【分享】谈CSS3中display属性的flex布局
最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*fl ...
随机推荐
- python—socket编程
一:客户端/服务器 架构 1.硬件C/S架构:(例如,打印机) 2.软件C/S架构:互联网中处处是C/S架构 腾讯作为服务端为你提供视频,你得下个腾讯视频客户端才能看它的视频 C/S架构与socket ...
- 温故知新-多线程-深入刨析synchronized
Posted by 微博@Yangsc_o 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0 文章目录 摘要 synchroniz ...
- k8s学习-文档&概念
1.文档大全 kubernetes objects文档(yaml文件编写): https://kubernetes.io/docs/concepts/overview/working-with-obj ...
- chrome浏览器版本与驱动不匹配问题的解决办法
1.浏览器与驱动如何匹配才不会报错 使用selenium模块的webdriver打开谷歌浏览器时常遇到这样的错误提示: selenium.common.exceptions.WebDriverExce ...
- 小谢第23问： chorme的性能优化工具
问题场景:在前端日趋工程化的今天,前端性能优化是一名合格的前端工程师必备的技能,那么,如何正确的使用性能分析工具呢? 解决方案: 性能分析的流程: 在开发中我一般使用公司开发的测试脚本-kbase-w ...
- 如何快速修改/替换GIF的背景?
案例是将白色背景换成另一个颜色的背景.图是某女同事百度上搜到的,共有83个图层. 若是Windows系统的,Ctrl = Command 若是要换背景图,而不是纯色背景,步骤一样,只需将那个填充颜色的 ...
- Nice Jquery Validator 方法
.validator() .validator( options ) 描述:根据参数初始化验证,验证 jQuery 选中的表单 参数:{Object} options - 可选,参考配置选项 示例: ...
- <VCC笔记> 推断操作符，映射和量词
推断操作符 在VCC中,==>符号意味着逻辑推理结果,即离散数学中的蕴涵关系.P==>Q等价于((!P)||(Q)).是非常常用的操作符. 量词(quantifier) 关于量词,这里指的 ...
- （八）利用 Profile 构建不同环境的部署包
接上回继续,项目开发好以后,通常要在多个环境部署,象我们公司多达5种环境:本机环境(local).(开发小组内自测的)开发环境(dev).(提供给测试团队的)测试环境(test).预发布环境(pre) ...
- 【JMeter_06】JMeter逻辑控制器__If控制器<If Controller>
If控制器<If Controller> 业务逻辑: 根据表达式的结果来决定是否执行控制器下的脚本内容,与编程语言中的if判断逻辑大致相同,表达式结果为布尔值 true或false; 当表 ...