接触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进行页面的基础布局的更多相关文章

  1. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  2. 【html】【7】基础布局初探

    当了解了上面的文章有一定基础后,开始尝试初步基础布局,可能不美观,但是要开始有布局框架思想 基础代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  3. laravel 5.5 《电商实战 》基础布局

    我们需要为我们的项目构建一个基础的页面布局,布局文件统一存放在 resources/views/layouts 文件夹中,布局涉及的文件如下: app.blade.php —— 主要布局文件,项目的所 ...

  4. display:flex;多行多列布局学习

    从以前的table布局到现在的div布局,再到未来的flex布局,CSS重构方面对展示行和适应性的要求越来越高: 首先来比较一下布局方式的更新意义: table布局: 优点:1.兼容性好,ie6.ie ...

  5. python:页面布局 后台管理页面之常用布局

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. display:flex 多栏多列布局

    转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...

  7. 【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局

    01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...

  8. 谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题

    谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题 : 谷歌浏览器的版本过高,选择60版本即可: 版本 60.0.3080.5(正式版本)

  9. CSS基础布局

    目录 css基础布局 1.布局相关的标签 2.盒子模型 2-1 什么是盒子模型 2-2 块级元素和内联元素(行内元素) 2-3 盒子模型之间的关系 盒子模型相关CSS属性 3.浮动 3-1 什么是浮动 ...

随机推荐

  1. Weblogic常见故障常:JDBC Connection Pools(转)

    WebLogic Server中数据库连接池是一个经常出问题的地方,总结一下出问题的原因和解决办法. 一.数据库连接泄漏 此类问题一般都是由于开发人员没有正确关闭数据库连接造成的.比如使用完Conne ...

  2. PTA Strongly Connected Components

    Write a program to find the strongly connected components in a digraph. Format of functions: void St ...

  3. css:去掉手机浏览器上点击时的边框和阴影

    outline:none;(去掉蓝框) -webkit-tap-highlight-color:rgba(0,0,0,0) ;(去掉阴影)适用于ios,Android

  4. 测试webAPP时图标背景一片黑色

    写了个web小程序,打包成APP后安装到手机里,在魅族手机里显示是正常的,但是在EMUI和MIUI中却显示一片黑色,搞了半天才发现原来是因为EMUI会自动给应用的图标裁剪圆角并加上背景色,背景色是系统 ...

  5. AspNetPager分页控件使用方法

    一.下载AspNetPager.dll 二.AspNetPager.dll复制于应用程序下的bin目录,打开解决方案,引用dll文件 三. 在工具栏中添加控件,这样可以支持拖拽使用 四. 要使用Asp ...

  6. JsonString,字典,模型之间相互转换

    NSData转字符串 [NSString alloc] initWithData: encoding:] 模型转字典 attInfo.keyValues 字典转模型 ZTEOutputInfo *ou ...

  7. Ajax 知识点

    AJAX 即"Asynchronous Javascript And XML"(异步JavaScript和XML) Ajax 不是某种编程语言,只是一种在无需重新加载整个网页的情况 ...

  8. java中的static使用--静态变量、静态方法

    Java 中的 static 使用之静态变量 大家都知道,我们可以基于一个类创建多个该类的对象,每个对象都拥有自己的成员,互相独立.然而在某些时候,我们更希望该类所有的对象共享同一个成员.此时就是 s ...

  9. mysql 用命令操作

    本篇文章来源于http://c.biancheng.net/cpp/html/1441.html mysql:连接数据库 mysql命令用户连接数据库. mysql命令格式: mysql -h主机地址 ...

  10. ChartServices Dev图形封装

    .工具类ChartServices using System; using System.Data; using System.Drawing; using DevExpress.XtraCharts ...