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. OOP 1.2 const关键字

    1.2 const关键字 1.常量 指针常量 定义常量:const 类型 =值 定义指针常量:const *类型=值 常量指针不可通过常量指针修改其指向的内容 可直接修改其指向的内容 常量指针的指向可 ...

  2. lintcode-205-区间最小数

    205-区间最小数 给定一个整数数组(下标由 0 到 n-1,其中 n 表示数组的规模),以及一个查询列表.每一个查询列表有两个整数 [start, end]. 对于每个查询,计算出数组中从下标 st ...

  3. iptables 工具的使用

    试验建议:关闭CentOS 7 或 CentOS 6的防火墙 (systemctl stop firewalld ; systemctl disable firewalld 或 service ipt ...

  4. jdbc 6.0

    1.获取数据库自动生成的键值 package com.rong.jielong; import java.sql.Connection; import java.sql.DriverManager; ...

  5. 解决pciss_spc导入提示表空间不存在以及扩展失败的问题

    select NAME FROM USER$ ORDER BY NAME ; CREATE USER pciss IDENTIFIED BY pciss ; GRANT DBA TO pciss ; ...

  6. PHP实现HTML页面静态化

    随着网站的内容的增多和用户访问量的增多,无可避免的是网站加载会越来越慢,受限于带宽和服务器同一时间的请求次数的限制,我们往往需要在此时对我们的网站进行代码优化和服务器配置的优化.一般情况下会从以下方面 ...

  7. PHP中关于取模运算及符号

    执行程序段<?php  echo 8%(-2) ?>,输出结果是: %为取模运算,以上程序将输出0 $a%$b,其结果的正负取决于$a的符号. echo ((-8)%3);     //将 ...

  8. 【uoj#139】[UER #4]被删除的黑白树 贪心

    题目描述 给出一个 $n$ 个节点的树,$1$ 号点为根.现要将其中一些点染成黑色,使得每个叶子节点(不包括根节点)到根节点路径上的黑点数相同.求最多能够染多少个黑点. 题解 贪心 显然有结论:选择的 ...

  9. Sum of Consecutive Integers LightOJ - 1278(推公式 数学思维)

    原文地址:https://blog.csdn.net/qq_37632935/article/details/79465213 给你一个数n(n<=10^14),然后问n能用几个连续的数表示; ...

  10. 聊聊flink Table的groupBy操作

    本文主要研究一下flink Table的groupBy操作 Table.groupBy flink-table_2.11-1.7.0-sources.jar!/org/apache/flink/tab ...