本文导读:在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式,即实现非常灵活的布局处理。

弹性布局(flexible box)模块旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。

弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间的能力。

最重要的是弹性盒子布局与方向无关,相对于常规的布局,很显然,这些工作以及网页设计缺乏灵活性,无法支持大型和复杂的应用程序(特别当它涉及到改变方向,缩放、拉伸和收缩等)。

一、弹性盒布局中的术语

1).弹性容器:弹性容器也就是所有弹性元素的父容器。

2).弹性子元素:弹性容器的所有子元素都是弹性子元素。

3).轴:弹性盒布局中分主轴和侧轴。主轴是布局布局的方向,侧轴垂直于主轴。

4).方向: 弹性容器的主轴开始、主轴结束和侧轴开始、侧轴结束 边缘代表了弹性子元素排列的起始和结束位置。同时可以改变属性值来改变显示位置。

二、弹性盒布局中的属性

1、display: flex | inline-flex; (适用于父类容器元素上)

定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器

(1)、box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)

(2)、inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)

(3)、flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)

(4)、inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)

(5)、flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)

(6)、inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)

2、flex-grow (适用于弹性盒模型容器子元素)

设置或检索弹性盒的扩展比率。(根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。)

定义

flex-grow: <number>

值说明

<number>:用数值来定义扩展比率。不允许负值

flex-grow的默认值为0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。本例中b,c两项都显式的定义了flex-grow,可以看到总共将剩余空间分成了4份,其中b占1份,c占3分,即1:3

3、flex-shrink (适用于弹性盒模型容器子元素)

设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。)

定义

flex-shrink: <number>

说明

flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

4、flex-basis(适用于弹性盒模型容器子元素)

设置或检索弹性盒伸缩基准值。

定义

flex-basis: <length> | auto | <percentage>

值的说明

auto:无特定宽度值,取决于其它属性值

<length>:用长度值来定义宽度。不允许负值

<percentage>:用百分比来定义宽度。不允许负值

5、flex (适用于弹性盒模型子元素)

复合属性。设置或检索伸缩盒对象的子元素如何分配空间。

如果缩写flex:1, 则其计算值为:1 1 0

定义

flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

值的说明

none:none关键字的计算值为: 0 0 auto

[ flex-grow ]:定义弹性盒子元素的扩展比率。

[ flex-shrink ]:定义弹性盒子元素的收缩比率。

[ flex-basis ]:定义弹性盒子元素的默认基准值。

6、flex-direction (适用于父类容器的元素上)

设置或检索伸缩盒对象的子元素在父容器中的位置。

定义

flex-direction: row | row-reverse | column | column-reverse

值说明

row:横向从左到右排列(左对齐),默认的排列方式。

row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。

column:纵向排列。

row-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

备注

flex生效需定义其父元素display为flex

7、flex-wrap (适用于父类容器上)

设置或检索伸缩盒对象的子元素超出父容器时是否换行。

定义

flex-wrap: nowrap | wrap | wrap-reverse

值说明

nowrap:当子元素溢出父容器时不换行。

wrap:当子元素溢出父容器时自动换行。

wrap-reverse:反转 wrap 排列。

8、flex-flow (适用于父类容器上)

复合属性。设置或检索伸缩盒对象的子元素排列方式。

定义

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

值说明

[ flex-direction ]:定义弹性盒子元素的排列方向。

[ flex-wrap ]:定义弹性盒子元素溢出父容器时是否换行。

9、align-content (适用于父类容器上)

设置或检索弹性盒堆叠伸缩行的对齐方式。

定义

align-content: flex-start | flex-end | center | space-between | space-around | stretch

值说明

(1)、flex-start:各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界,之后的每一行都紧靠住前面一行。

(2)、flex-end:各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界,之后的每一行都紧靠住前面一行。

(3)、center:各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐,保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。(如果剩下的空间是负数,则各行会向两个方向溢出的相等距离。)

(4)、space-between:各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'flex-start'。在其它情况下,第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界,最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界,剩余的行则按一定方式在弹性盒窗口中排列,以保持两两之间的空间相等。

(5)、space-around:各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。在其它情况下,各行会按一定方式在弹性盒容器中排列,以保持两两之间的空间相等,同时第一行前面及最后一行后面的空间是其他空间的一半。

(6)、stretch:各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'。在其它情况下,剩余空间被所有行平分,以扩大它们的侧轴尺寸。

10、align-items (适用于父类容器上)

设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

定义

align-items: flex-start | flex-end | center | baseline | stretch

值说明

(1)、flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

(2)、flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

(3)、center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

(4)、baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。

(5)、stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

11、align-self (适用于弹性盒模型子元素)

设置或检索弹性盒子元素自身在侧轴(纵轴)方向上的对齐方式。

定义

align-self: auto | flex-start | flex-end | center | baseline | stretch

值说明

(1)、auto:如果'align-self'的值为'auto',则其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch'。

(2)、flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

(3)、flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

(4)、center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

(5)、baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。

(6)、stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

12、justify-content (适用于父类容器上)

设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时,这一属性可协助对多余的空间进行分配。当元素溢出某行时,这一属性同样会在对齐上进行控制。

定义

justify-content: flex-start | flex-end | center | space-between | space-around

值说明

(1)、flex-start:弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。

(2)、flex-end:弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。

(3)、center:弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。

(4)、space-between:弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于'flex-start'。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。

(5)、space-around:弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于'center'。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

13、order (适用于弹性盒模型容器子元素)

定义

order: <integer>

值说明

<integer>:用整数值来定义排列顺序,数值小的排在前面。可以为负值。

三、CSS3弹性布局实例

1、居中对齐

.flex-container /**//* We first create a flex layout context */
display: flex;

/**//* Then we define the flow direction and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;


}

实例说明

通过设置父类容器的css代码控制子元素的排列方式(flex-direction:row)从左到右(默认方式)。子元素超出内容时是否换行。flex-wrap:wrap(采用换行的方式)。合起来就是flex-flow:row wrap。

设置子元素的弹性盒堆叠伸缩行的对齐方式为在盒子中平局分布 justify-content:space-around

2、自适应导航

 

{...}{
display: flex;
flex-flow: row wrap;

}

{...}{
.navigation {

}
}

{...}{
.navigation {

}
}

实例说明

(1)、设置子元素为从左到右(flex-direction:row),内容超出换行(flex-wrap:wrap).

(2)、设置子元素的内容向右对齐(justify-content:flex-end)

(3)、当小于800px时,内容为居中,当小于500px时,内容纵向排列,从上到下。

3、3栏移动优先布局

 

.wrapper ...{
display: flex;
flex-flow: row wrap;
}

...{
flex: 1 100%;
}

/**//* Medium screens */
@media all and (min-width: 600px) /**//* We tell both sidebars to share a row */
.aside ...{ flex: 1 auto; }
}

...{
...{ flex: 2 0px; }

.aside-1 ...{ order: 1; }
.main ...{ order: 2; }
.aside-2 ...{ order: 3; }
.footer ...{ order: 4; }
}

实例说明

(1)、设置子元素从左到右,超出换行(flex-flow:row wrap;)。

(2)、默认情况下所有子元素拓展比例为1(flex-grow:1),伸缩比例为100%(flex-basis:100%)。

(3)、大于800px时,.main的拓展比例为2.伸缩值为0(flex-basis:0px),并且侧栏aside-1排列在第一位,main在第二位,aside-2在第三位。

(4)、大于600时。.aside元素的拓展比例为1(flex-grow:1),伸缩比例为auto(flex-basis:auto)。

【repost】CSS3弹性布局的更多相关文章

  1. css3弹性布局语法全解

    本文介绍css3弹性布局的语法 html布局 <div class="box"> <div class="item">1</div ...

  2. 从零开始学习前端开发 — 12、CSS3弹性布局

    一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...

  3. CSS3弹性布局内容对齐(justify-content)属性使用具体解释

    内容对齐(justify-content)属性应用在弹性容器上.把弹性项沿着弹性容器的主轴线(main axis)对齐. 该操作发生在弹性长度以及自己主动边距被确定后. 它用来在存在剩余空间时怎样加以 ...

  4. css3弹性布局

    二.弹性布局(重点******************************************) 1.什么是弹性布局 弹性布局,是一种布局方式. 主要解决的是某个元素中子元素的布局方式 让页面 ...

  5. CSS3弹性布局内容对齐(justify-content)属性使用详解

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐. 该操作发生在弹性长度以及自动边距被确定后. 它用来在存在剩余空间时如何加以分配 ...

  6. css3 FlexBox 弹性布局

    Flex 弹性布局 这个是css3中新添加的内容,现在已经支持所有的浏览器,利用Flex布局,可以简便.完整.响应式地实现各种页面布局. 注意:在设置 flex 后,子元素的flaot ,clear, ...

  7. CSS3支持box-flex弹性布局

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  8. 第 29 章 CSS3 弹性伸缩布局[上]

    学习要点: 1.布局简介 2.旧版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.布局简介 CSS3 提供一种崭新的 ...

  9. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

随机推荐

  1. J2EE,J2SE,J2ME,JDK,SDK,JRE,JVM区别

    转自:http://www.metsky.com/archives/547.html 一.J2EE.J2SE.J2ME区别 J2EE——全称Java 2 Enterprise Edition,是Jav ...

  2. 纯js 判断手势滑动方向

    $('body').on('touchstart', '#gallerySlider img', function(e) { var touch = e.originalEvent, startX = ...

  3. Clr Via C#读书笔记---I/O限制的异步操作

    widows如何执行I/O操作      构造调用一个FileStream对象打开一个磁盘文件-----FileStream.Read方法从文件中读取数据(此时线程从托管代码转为本地/用户模式代码)- ...

  4. 2014多校第六场 1010 || HDU 4930 Fighting the Landlords (模拟)

    题目链接 题意 : 玩斗地主,出一把,只要你这一把对方要不了或者你出这一把之后手里没牌了就算你赢. 思路 : 一开始看了第一段以为要出很多次,实际上只问了第一次你能不能赢或者能不能把牌出尽. #inc ...

  5. SQL的数据类型

    Character 字符串: 数据类型 描述 存储 char(n) 固定长度的字符串.最多 8,000 个字符. N的范围1-8000 varchar(n) 可变长度的字符串.最多 8,000 个字符 ...

  6. 你需要知道的九大排序算法【Python实现】之选择排序

    一.选择排序 基本思想:选择排序的思想非常直接,不是要排序么?那好,我就从所有序列中先找到最小的,然后放到第一个位置.之后再看剩余元素中最小的,放到第二个位置--以此类推,就可以完成整个的排序工作了. ...

  7. Windows下安装Apache2.4+PHP5.4+Mysql5.7

    注:文中所写的安装过程均在Win7 x86下通过测试,提供的百度云下载链接均为32位安装包,如需Apache和PHP的64位安装包请从官网下载! 一.安装Apache2.4.12 Apache官方下载 ...

  8. 【VMware混合云】掀起你的盖头来

    作者:范军 (Frank Fan) 新浪微博:@frankfan7   微信:frankfan7 VMware混合云服务(vCHS)预计在2013年8月23日正式面向用户推出.目前开放服务的四个数据中 ...

  9. java学习(五)

    学号 20189214 <Java程序设计>第五周学习总结 教材学习内容总结 输入输出 文件系统可以包含3种类型的对象:文件.目录和符号链接. 一个文件或路径是一个java.io.File ...

  10. 2018牛客网暑假ACM多校训练赛(第三场)D Encrypted String Matching 多项式 FFT

    原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round3-D.html 题目传送门 - 2018牛客多校赛第三场 D ...