flex进行页面的基础布局
接触flex有一段时间了,由于自己在移动上的经验比较少,一直以为这个和css3的其他属性差不多,就是一个盒模型的缩放之类的。今天一个移动的小项目用到了这个属性,仔细看了下,先不说里面具体的属性,就flex自身来说,就可以完爆常用的float进行布局。
由于历史原因,flex在之前也曾经被表达成box-flex, 看到一个很好的解释(英文的),原句比较长,我简略了下:
if you Google around about Flex, you will find lots of information. Here's how you can quickly tell.
1. if you see display:box or a box-{*} property, you are looking at the old 2009 version.
2. if you see display:flexbox and the flex() function, you are looking at an akward phrase at 2011.
3. if you see display:flex and the flex-{*} property, you are looking at the current version.
flex是弹性布局的意思, 我理解是按比例分配的意思。这里网上一个博客写的很易懂。基础的知识不再赘述。这里主要提到在布局上,尤其是等高布局时的应用。
常见的,比如左侧固定,右侧自适应的布局(好多种方法都可以实现),但是如果左侧和右侧需要等高呢,传统的布局方法,我想了一下,只想出了一种。
#father{
overflow: hidden;
}
#left{
width: 200px;
}
#right{
float: right;
}
这里是以右侧的高度为基准进行的,左侧和右侧的高度保持一致。因为浮动元素的高度是被其内容决定的,标准流元素的高度是由父元素的高度来决定的。所以这里将右侧设置为浮动,在html也要注意,需要将浮动元素写到前面。
<div id="father">
<div id="right"></div>
<div id="left"></div>
</div>
铺垫好长。。。。 累死宝宝了
下面进入正题:
#father{
width: 900px;
display: flex;
background: #ccc;
height: 300px;
}
/*大宝说最少要200px宽*/
#child-1{
background: red;
width: 200px;
}
/*二宝的比例是1,就是去掉大宝的200px后,二宝和父亲的比例是1:1*/
#child-2{
flex:;
-background: green;
}
也不需要什么BFC了,也不需要什么浮动了,直接等高,看起来好舒服的说~~~
并且,即使是三列布局,四列布局,宽度自适应布局,统统按照约定的比例进行执行就可以了。
#father{
display: flex;
width: 1000px;
height: 500px;
} #child-1{
flex:;
-webkit-flex:;
} #child-2{
flex:;
-webkit-flex:;
} #child-3{
flex:;
-webkit-flex:;
}
弹性布局就是这么任性~~~
PS: 今天还发现了一个好玩的东西 :autoprefixer:https://github.com/postcss/autoprefixer.比如你写了一个display: flex 脚本跑完后会自动将各个浏览器下的那些个-webkit....-moz-....等补齐,真是个好东西,可惜要在grup下使用,待姐姐摸索完了后再来记录。
flex进行页面的基础布局的更多相关文章
- 【Flutter学习】页面布局之基础布局组件
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 【html】【7】基础布局初探
当了解了上面的文章有一定基础后,开始尝试初步基础布局,可能不美观,但是要开始有布局框架思想 基础代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- laravel 5.5 《电商实战 》基础布局
我们需要为我们的项目构建一个基础的页面布局,布局文件统一存放在 resources/views/layouts 文件夹中,布局涉及的文件如下: app.blade.php —— 主要布局文件,项目的所 ...
- display:flex;多行多列布局学习
从以前的table布局到现在的div布局,再到未来的flex布局,CSS重构方面对展示行和适应性的要求越来越高: 首先来比较一下布局方式的更新意义: table布局: 优点:1.兼容性好,ie6.ie ...
- python:页面布局 后台管理页面之常用布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- display:flex 多栏多列布局
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...
- 【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局
01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...
- 谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题
谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题 : 谷歌浏览器的版本过高,选择60版本即可: 版本 60.0.3080.5(正式版本)
- CSS基础布局
目录 css基础布局 1.布局相关的标签 2.盒子模型 2-1 什么是盒子模型 2-2 块级元素和内联元素(行内元素) 2-3 盒子模型之间的关系 盒子模型相关CSS属性 3.浮动 3-1 什么是浮动 ...
随机推荐
- Weblogic常见故障常:JDBC Connection Pools(转)
WebLogic Server中数据库连接池是一个经常出问题的地方,总结一下出问题的原因和解决办法. 一.数据库连接泄漏 此类问题一般都是由于开发人员没有正确关闭数据库连接造成的.比如使用完Conne ...
- PTA Strongly Connected Components
Write a program to find the strongly connected components in a digraph. Format of functions: void St ...
- css:去掉手机浏览器上点击时的边框和阴影
outline:none;(去掉蓝框) -webkit-tap-highlight-color:rgba(0,0,0,0) ;(去掉阴影)适用于ios,Android
- 测试webAPP时图标背景一片黑色
写了个web小程序,打包成APP后安装到手机里,在魅族手机里显示是正常的,但是在EMUI和MIUI中却显示一片黑色,搞了半天才发现原来是因为EMUI会自动给应用的图标裁剪圆角并加上背景色,背景色是系统 ...
- AspNetPager分页控件使用方法
一.下载AspNetPager.dll 二.AspNetPager.dll复制于应用程序下的bin目录,打开解决方案,引用dll文件 三. 在工具栏中添加控件,这样可以支持拖拽使用 四. 要使用Asp ...
- JsonString,字典,模型之间相互转换
NSData转字符串 [NSString alloc] initWithData: encoding:] 模型转字典 attInfo.keyValues 字典转模型 ZTEOutputInfo *ou ...
- Ajax 知识点
AJAX 即"Asynchronous Javascript And XML"(异步JavaScript和XML) Ajax 不是某种编程语言,只是一种在无需重新加载整个网页的情况 ...
- java中的static使用--静态变量、静态方法
Java 中的 static 使用之静态变量 大家都知道,我们可以基于一个类创建多个该类的对象,每个对象都拥有自己的成员,互相独立.然而在某些时候,我们更希望该类所有的对象共享同一个成员.此时就是 s ...
- mysql 用命令操作
本篇文章来源于http://c.biancheng.net/cpp/html/1441.html mysql:连接数据库 mysql命令用户连接数据库. mysql命令格式: mysql -h主机地址 ...
- ChartServices Dev图形封装
.工具类ChartServices using System; using System.Data; using System.Drawing; using DevExpress.XtraCharts ...