css3之伸缩盒布局(flex)

目录
  1. 1.flexbox的基本知识
    1. 布局模式
    2. Flexbox功能
    3. flexbox中术语
    4. 模型规范状态
    5. flexbox的兼容性问题
    6. flexbox模型语法
  2. 旧版本flexbox详解
  3. 混合模式
  4. 新版本flexbox模型

1.flexbox的基本知识

布局模式

之前css2：

  • 块布局
  • 行内布局
  • 表格布局
  • 定位布局

现在：css3引入布局模式Flexbox布局；
主要思路：以最佳的方式填充可用空间。

Flexbox功能

flexbox布局对于复杂的页面非常有用。可以轻松实现屏幕和浏览器窗口大小发生变化时候。

flexbox中术语

1.主轴和侧轴
一图以示之：

2.伸缩容器和伸缩项目
伸缩容器：通过diaplay属性显式的给元素设置为flex/inline-flex，则容器就是一个伸缩容器。

若元素display的指定值是inline-flex且元素是一个浮动或绝对定位元素，则display的计算值是flex。

伸缩项目：伸缩元素的每个子元素都会成为一个伸缩项目。
3.伸缩容器的属性

属性 说明
伸缩流方向 指定伸缩容器的主轴方向
伸缩行换行 设置伸缩容器的伸缩项目是单行显示还是多行显示，以及设定侧轴的方向
伸缩方向和换行 伸缩流方向和伸缩行换行的复合
主轴对齐 设置伸缩项目在当前航在主轴方向的对齐方式
侧轴对齐 略
堆栈伸缩行 类似于侧轴对齐，但是这是来控制伸缩项目行在布局轴的堆放方式

4.伸缩项目的属性

属性 说明
显示顺序 修改伸缩项目在页面的现实顺序，排序组合
侧轴对齐 align-items设置伸缩容器中包括匿名伸缩项目的所有的对齐方式；align-self设置伸缩项目自己方式。
伸缩性 定义伸缩项目可改变它们的宽度和高度填补可用的空间。
伸缩行 伸缩项目沿着伸缩容器的一个伸缩行定位。

模型规范状态

三个版本：

  • 旧版本：2009年版本。display:box或者display:inline-box;
  • 混合版本：2011年版本。display:flxebox或者display:inline-flexbox;
  • 新版本：display:flex或者display:inline-flex;

flexbox的兼容性问题

1.旧版本

属性 IE firefox chrome opera safari
flexbox no 2~21 4~20 no 3~6

2.新版本

属性 IE firefox chrome opera safari
flexbox 11+ 22+ 21+ 12+ no

flexbox模型语法

1.主轴对齐方式：指定伸缩项目的主轴对齐方式

规范版本 属性名称 start center end justify distribute
标准版本 justify-pack flex-start center flex-pack flex-end space-around
混合版本 flex-pack start center end justify distribute
最老版本 box-pack start center end justify N/A

2.侧轴对齐方式

规范版本 属性名称 start center end baseline stretch
标准版本 align-items flex-start center flex-pack baseline stretch
混合版本 flex-align start center end baseline stretch
最老版本 box-align start center end baseline stretch

3.伸缩项目行对齐方式：指定伸缩项目行在侧轴的对齐方式

规范版本 属性名称 start center end distribute stretch
标准版本 align-content flex-start center flex-end space-around stretch
混合版本 flex-line-pack start center end distribute stretch

4.显示顺序

版本 属性名称 属性值
标准 order
混合 flex-order
老旧 box-ordinal-group

5.换行

版本 属性名称 不换行 换行 反转换行
标准 flex-wrap nowrap wrap wrap-reverse
混合 flex-wrap nowrap wrap wrap-reverse
老旧 box-lines single multiple N/A

旧版本flexbox详解

开启的方法：

1
display:box | inline-box

伸缩流方向：

1
box-orient:horizontal | vertical | inline-axis | block-axis

布局顺序：伸缩项目在伸缩容器中的流动顺序。

1
box-direction:normal | reverse

伸缩换行：处理溢出情况

1
box-lines: single | multiple

主轴对齐box-pack

1
box-pack: start | center | end | justify |

侧轴对齐box-align

1
box-align: start | end | center | baseline | stretch |

伸缩性box-flex
可以灵活的控制伸缩项目在伸缩容器中的剩余空间。

1
box-flex: <number>

  • 伸缩项目的固有宽度之和小于伸缩容器的宽度，伸缩项目会自动增加宽度以填充伸缩容器。
  • 伸缩项目的固有宽度之和大于伸缩容器的宽度，伸缩项目会自动减少宽度以适应伸缩容器。

显示顺序box-ordinal-group
重新设置伸缩项目的出现顺序。默认的是在DOM中出现的先后顺序。

1
box-ordinal-group: <integer>

实战：box制作自适应的三列等高布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
	<div id="header">
		<h1>Header</h1>
	</div>
	<div id="page">
		<div id="main">
			<h1>主内容</h1>
		</div>
		<div id="sidebar-left">
			<h1>左边栏</h1>
		</div>
		<div id="sidebar-right">
			<h1>右边栏</h1>
		</div>
	</div>
	<div id="footer">
		<p>我是页面页脚</p>
	</div>
</body>

  • body开启box，伸缩流方向是vertical。

  • page开启伸缩性。

  • 把page开启box，伸缩流是horizontal。
  • main伸缩性。
  • 设置main、sidebar-left和sidebar-right的显示顺序。
  • 最后，page的侧轴对齐方式设置成stretch。

混合模式

开启：

1
display:flexbox | inline-flexbox

伸缩流方向

1
flex-direction: row | row-reserve | column | column-reserve

伸缩换行flex-wrap

1
2
3
flex-wrap: nowrap | wrap | wrap-reserve
//nowrap:类似box-lines的取值single
//wrap:类似box-lines的取值multiple

伸缩流方向和换行：flex-flow

1
flex-flow: <flex-direction> | <flex-wrap>

主轴对齐flex-pack

1
flex-pack: start | end | center | justify | distribute

侧轴对齐flex-align

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

堆栈伸缩行flex-line-pack

1
flex-line-pack: start | end| center | justify | distribute | stretch

flex-line-pack属性主要用来控制伸缩项目的排列方式。

伸缩性flex

1
flex: <number>

显示顺序flex-order

1
flex-order: <integer>

类似老版本的box-ordinal-group

新版本flexbox模型

开启：

1
display:flex | inline-flex

伸缩流方向

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

伸缩换行flex-wrap

1
flex-wrap: nowrap | wrap | wrap-reverse

伸缩流方向和换行

1
flex-flow: <flex-firection> | <flex-wrap>

主轴对齐justify-content

1
2
3
justify-content: flex-start | flex-end | center | space-between | space-around
//space-between:类似justify。
//space-around:伸缩项目会平均分布在行里。类似distribute。

侧轴对齐align-items

1
2
3
4
5
//调整伸缩项目在侧轴的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch

//align-self主要用来设置单独伸缩项目在侧轴的对齐方式。
align-self: flex-start | flex-end | center | baseline | stretch

堆栈伸缩行align-content

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

会更改flex-wrap的行为。它和align-items相似，但不是对齐伸缩项目，而是对齐的是伸缩行。

伸缩性flex

显示顺序order

1
order: <number>