Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出,这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式。

浏览器兼容性


作为非常现实的开发者,是否对一个新技术进行关注,首先要考虑它的浏览器兼容性如何。我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的。

可以看到,现代浏览器基本上都支持了,IE10开始也支持了(IE和Safari分别加-ms--webkit-前缀即可),移动端的支持情况也比较良好,唯一不支持的平台只有Opera了,咱不带他玩→_→

因此,奥巴马同志说:伸缩盒模型是好的,有前途的。(嗯嗯~)

伸缩盒基本概念


伸缩盒的最大特点或者说优点就在于它考虑到了现今高昂的房价和人民日益增长的住宅需求之间的矛盾,房屋面积是有限的,但是我们的伸缩盒能够最合理最高效地把房子分给大家。面积多了,就给大家伙多分点;面积小了,就让各位挤一挤少分点,总而言之不会让任何一个人露宿街头的(overflow)!

既然我们提到了房子和住户的关系,那么住户的排列自然需要沿一定的方向。对于块级元素来说,布局的延伸方向是自上而下的,也就是纵向。而对于行内元素来说,布局延伸方向是自左往右的,也就是横向。而伸缩盒呢,它的方向是可变的,既能纵向延伸,也能横向舒展,这取决于你的设置了。

伸缩盒模型基本术语

伸缩盒模型的思想和普通的块级元素和行内元素的布局思想有较大的不同,它引入了一些新的概念和术语,通过下面这张图来了解一下:

Flex container 伸缩盒容器
这就是用来分的房子,这是一间神奇的房子,要让它变得神奇,将display属性声明为flex或inline-flex即可~

Flex item 伸缩项
房子里的居民,他们都会占有自己应得的住房面积。

为了形象说明,我们用代码来解释。

<div class="container">
<div class="item item-1">item 1</div>
<div class="item item-2">item 2</div>
<div class="item item-3">item 3</div>
</div>

CSS设置为:

.container {
display: flex;
width: 300px;
height: 100px;
...
}

在这里display: inline-flex;好像也可以。
对于其中的伸缩项元素,我们需要给他们事先安排好住房面积比例,我们就用最简单最健康的1:1:1吧~我们将比例声明在flex属性里

.item-1 {
flex:;
...
}
.item-2 {
flex:;
...
}
.item-3 {
flex:;
...
}

我们的大房子被完美地平分成三个隔间了,三家平分房租!

如果有人想住大点的房子,我们直接改变flex的比例即可:

.item-1 {
flex:;
...
}
.item-2 {
flex:;
...
}
.item-3 {
flex:;
...
}

是不是很方便?

Axes 轴
我们可以看到,图中有两条轴,分别标注了主轴和次轴(垂直于主轴)。然而实际上哪一条是主轴并不确定,是由我们来规定的。
1. flex-direction 此属性规定哪条轴为主轴。
2. justify-content 此属性设置了伸缩项在主轴方向上的排列方式,这个稍后解释。
3. align-items 此属性和上面的justify-content相对,表示伸缩项在次轴上的排列方式。
4. align-self 此属性规定某一个特定的伸缩项元素在次轴上的布局方式,在某个元素上设置该属性会覆盖它的align-items属性。也就是这个属性会让某个元素更有个性,不走寻常路~

flex-direction
当我们不想沿着默认的方向分房子的时候,我们可以改变flex-direction属性的值来改变主轴和方向,该属性默认的取值为row;

.container {
flex: row-reverse;
...
}

顾名思义,这会让伸缩项的排列方向反过来:

当此属性设置为column时,主次轴就会对调,元素的排列方向也会随之改变:

.container {
flex-direction: column;
...
}

至于flex: column-reverse的含义就不用我多说了吧~

justify-contents
有的时候,大家挨着住,一点空隙都没有也会很难受,连个过道都没有,隐私也不能保证对吧。这个时候,我们可以改变分配政策了,不再按比例分配,而是定额分配,每个人的面积是确定的。多出的房屋面积改成公共区域。

.item {
width: 80px;
...
}
...

设定了width属性后也要记得去掉flex属性的声明哦,不然flex属性的效果仍然会把width覆盖掉~
同时,如果width属性也不设定的话,元素宽度会表现为内容的宽度,which means 当伸缩项内部无内容时,将不会进行渲染,其表现就和display: none;一样。
这时,在容器上声明justify-content属性就可以安排伸缩项的位置了:

.content {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items
这项属性会改变次轴上元素排列的方式,对于本例来说原来次轴方向上元素的高度是表现为height: 100%;的,设定了align-items属性后,其高度表现就会发生改变了。

.content {
align-items: flex-start | flex-end | center | baseline | stretch;
}

说到这里了,伸缩项具体的表现其实可以想象出来了,想象不出来的就自己动手试一试吧~

order
在伸缩项上声明此属性,可以无视HTML结构的顺序而按照order从小到大的顺序沿flex-direction方向排列。比如:

.item-1 {
order:;
...
}
.item-2 {
order:;
...
}
.item-3 {
order:;
...
}

flex-wrap
此属性的默认值为nowrap,也就是忽略伸缩项的宽度,管你要多少住房面积,通通按照flex属性说好的分配,不许换行。

.container {
flex-wrap: nowrap | wrap | wrap-reverse
} .item {
width: 150px;
}

flex-grow,flex-shrink 和 flex-basis
上文提到的flex属性实际上是这三个属性的简写形式。这三个属性有相似性,都是表示项与项之间分配空间的相对比例关系,不同之处在于:
1. flex-grow属性:属性值为该伸缩项所占空间相对于其他伸缩项(声明了flex相关属性的项)的比值。
2. flex-shrink属性:该伸缩项相对于其他伸缩项缩小的比值,也就是说当flex-shrink: 3;时,该项所占空间为其他项的1/3。
3. flex-basis属性:属性值为该项所占空间占容器空间的百分比。

注意:对于flex-basis属性,当所有项的属性值相加<=100%时,会严格按照百分比值来渲染。当属性值相加>100%时,元素并不会溢出,而是表现为两两之间所占空间大小遵循相互的百分比比值。也就是说当存在三个伸缩项且flex-basis值都为50%时,表现行为与三个项均为flex: 1;一样。

Flexible Boxes布局模式在响应式开发中尤其好用,对不同的终端,设置元素之间的空间分配关系将会变成一件非常简单的事。伸缩盒布局和响应式布局中流行的流体布局哪种更好,还是可以结合起来,就看各位开发者发挥自己的聪明才智了!

文章来源:http://segmentfault.com/a/1190000000484017?_ea=179500

Flex布局(伸缩盒布局)的更多相关文章

  1. flex布局(弹性布局)

    1. 传统布局与 flex 布局比较 传统布局 兼容性好 布局繁琐 局限性,不能在移动端很好的布局 flex 弹性布局 操作方便,布局极为简单,移动端应用很广泛 PC端浏览器支持较差 IE 11 或 ...

  2. html5--6-65 布局4-弹性布局

    html5--6-65 布局4-弹性布局 实例 学习要点 掌握传统布局与CSS3新增弹性布局方式的实现和应用 弹性布局(弹性伸缩布局) 事实上它是一种新类型的盒子模型,也有书上称作弹性伸缩盒布局. 比 ...

  3. CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局

    伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex;    只能控制其子元 ...

  4. WEB字体,多列布局和伸缩盒

    WEB字体 语法 @font-face{ font-family:""; src:url() format() ... } 兼容性写法 @font-face { font-fami ...

  5. 弹性盒布局详解(display: flex;)

    弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...

  6. css笔记 - flex弹性盒布局

    flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...

  7. CSS3-弹性盒布局(Flex Box)

    弹性盒布局(Flex Box) 一.概念 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型 ...

  8. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

  9. 弹性盒布局(FlexBox)

    CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...

随机推荐

  1. webService —— soap

    package soupTest; import javax.jws.WebMethod; import javax.jws.WebService; import javax.xml.ws.Endpo ...

  2. huawei oceanstor

      华为产品:OceanStor 6000 V3系列 OceanStor 6800 V3 网页登入设备页面:https+ip+端口 资源分配界面: 首页: wwn为2100xxxxxxxx47e4,设 ...

  3. psp 第二周

    11号                                                                              12号 类别c 内容c 开始时间s 结 ...

  4. (五)Jmeter中的属性和变量

    一.Jmeter中的属性: 1.JMeter属性统一定义在jmeter.properties文件中,我们可以在该文件中添加自定义的属性 2.JMeter属性在测试脚本的任何地方都是可见的(全局),通常 ...

  5. Windows连接Linux服务器中MySQL数据库-权限配置

    问题描述 在Windows系统中安装了监控MySQL数据库服务器性能的工具Spotlight on MySQL,利用Spotlight连接Linux服务器中的MySQL,进行相关配置如下:   点击& ...

  6. PHP与类有关的几个魔术方法

    与类有关的其他魔术方法 序列化与反序列化技术 含义: 序列化: 就是将一个变量所代表的“内存”数据,转换为“字符串”形式并持久保存在硬盘上的一种做法. 反序列化: 就是将序列化之后保存在硬盘上的“字符 ...

  7. Windows配置java运行环境的步骤

    jdk不同版本下载地址:http://www.oracle.com/technetwork/java/javase/archive-139210.html 1.下载你适合你电脑的jdk版本,链接如上, ...

  8. BZOJ 2427 软件安装(强连通分量+树形背包)

    题意:现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和最大).但是现在有 ...

  9. MySQL一主两从

    服务器说明: MySQL-Master:192.168.1. MySQL-Slave1:192.168.1. MySQL-Slave2:192.168.1. 关闭防火墙,关闭selinux 统一采用源 ...

  10. Django之CSS,JS静态文件的配置

    一. 专门创建一个目录放静态文件,即CSS,JS等. 1)先把jquery.min拿过来. 2)新建一个CSS文件放入样式 3)在login.html中引入.css文件 在login.html中引入. ...