关于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 ...
随机推荐
- .NET Core Session源码探究
前言 随着互联网的兴起,技术的整体架构设计思路有了质的提升,曾经Web开发必不可少的内置对象Session已经被慢慢的遗弃.主要原因有两点,一是Session依赖Cookie存放Session ...
- 聊一聊Asp.net过滤器Filter那一些事
最近在整理优化.net代码时,发现几个很不友好的处理现象:登录判断.权限认证.日志记录.异常处理等通用操作,在项目中的action中到处都是.在代码优化上,这一点是很重要着力点.这是.net中的过滤器 ...
- Spark Streaming，Flink，Storm，Kafka Streams，Samza：如何选择流处理框架
根据最新的统计显示,仅在过去的两年中,当今世界上90%的数据都是在新产生的,每天创建2.5万亿字节的数据,并且随着新设备,传感器和技术的出现,数据增长速度可能会进一步加快. 从技术上讲,这意味着我们的 ...
- 2019-02-02 Python学习之死锁和Rlock
死锁:"当一个线程永远地持有一个锁,并且其他线程都尝试去获得这个锁时,那么它们将永远被阻塞" e.g. import threading import time mutexboy ...
- Arduino控制超声波检测与0.96OLED及串口显示
Arduino控制超声波检测与0.96OLED及串口显示代码使用库共享(包括超声波检测与U8glib): 使用元件: 0.96寸 12864 I2C OLED 128x64规格 超声波检测模块 湿度模 ...
- CODING DevOps 系列第一课：基于开源工具链打造持续交付平台
当下软件发展趋势 当今 IT 行业发展中比较流行的几个技术,首先是微服务化,将原有的一个系统拆分成多个,意味着有多个系统需要构建.测试.部署和运维. 第二个是敏捷开发模式,需求粒度更细化,要求一个可独 ...
- ida 调试android之路
系统: Mac OSX 调试环境:IDA7.0, adb 手机环境:红米手机 android 4.4.4 前提条件: 红米手机root之路:https://www.cnblogs.com/dzqdz ...
- 程序员Linux教程初窥入门-刘志敏-专题视频课程
程序员Linux教程初窥入门-313人已学习 课程介绍 程序员Linux教程初窥入门主要针对初级入门程序员的课程,也是为后期学习其他课程的一个基础,Git.Maven.Jenkins.R ...
- java基础 内部类详解
什么是内部类? 1.内部类也是一个类: 2.内部类位于其他类声明内部. 内部类的常见类型 1.成员内部类 2.局部内部类 3.匿名内部类 4.静态内部类 简单示例 /** * 外部类 * */ pub ...
- Python函数参数详解
Python函数参数详解 形参与实参 什么是形参 在定义函数阶段定义的参数称之为形式参数,简称形参,相当于变量名. 什么是实参 在调用函数阶段传入的值称为实际参数,简称实参.相当于"变量值& ...