关于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 ...
随机推荐
- RPM包管理-yum在线管理
常用yum命令 查询 查询所有可用软件包列表,yum list 搜索所有和关键字相关的软件包,yum search 关键字 安装 yum -y install 包名,其中,-y 表示自动回答yes 升 ...
- requireJS模块化
1. JavaScript里面js代码的写法:目标是解决冲突和依赖 函数式编程,全局函数和变量--很容易覆盖 对象的写法--也会从外面改变 命名空间:利用名称不同缓冲js代码的冲突---名称太长,不方 ...
- python IDE pycharm的安装与使用
Python开发最牛逼的IDE——pycharm (其实其它的工具,例如eclipse也可以写,只不过比较麻烦,需要安装很多的插件,所以说pycharm是最牛逼的) pycharm,下载专业版的,不要 ...
- javaScript的执行机制-同步任务-异步任务-微任务-宏任务
一.概念理解 1.关于javascript javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变.所以一切javascr ...
- 使用PyQtGraph绘制图形（2）
采用addplot()方法将多个图形添加到一个窗口. 首先利用numpy模块创建两个随机数组,用来作为图形绘制的数据: import pyqtgraph as pg import numpy as n ...
- 09.Django-信号
目录 Django中的信号及其用法 Django中内置的signal 内置信号的使用 自定义信号 Django中的信号及其用法 Django中提供了"信号调度",用于在框架执行操作 ...
- 写了个全局变量的bug，被同事们打脸！！！
话说栈长前阵子写了一个功能,测试 0 bug 就上线了,上线后也运行好好的,好多天都没有人反馈bug,超爽.. 不出问题还好,出问题就是大问题.. 最近有个客户反馈某些数据混乱问题,看代码死活看不出什 ...
- @hdu - 6607@ Easy Math Problem
目录 @description@ @solution@ @accepted code@ @details@ @description@ 求: \[\sum_{i=1}^{n}\sum_{j=1}^{n ...
- matplotlib添加子图(拼图功能)
我们已经知道,matplotlib是python中的一个十分好用的作图库,它的简单的使用方法可以在之前的随笔中找到.传送门:https://www.cnblogs.com/chester-cs/p/1 ...
- matlab实现梯度下降法(Gradient Descent)的一个例子
在此记录使用matlab作梯度下降法(GD)求函数极值的一个例子: 问题设定: 1. 我们有一个$n$个数据点,每个数据点是一个$d$维的向量,向量组成一个data矩阵$\mathbf{X}\in \ ...