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下使用,待姐姐摸索完了后再来记录。

上一篇:教你使用淘宝接口查询手机号码归属地


下一篇:php代码审计7审计csrf漏洞