1.前言
CSS3中引入的布局模式Flexbox布局,主要是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳的方式填充可用空间(适配所有类型的现实设备和屏幕大小)。
Flexbox布局功能主要有以下几点:
屏幕和浏览器窗口大小改变时可以灵活调整布局
指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),来调整项目大小。(注意,额外空间的概念要理清楚!)
指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间
指定如何将垂直于元素布局周的额外空间分布到该元素的周围
控制元素在页面上的布局方向
可以在浏览器渲染周不按照文档流先后顺序重排伸缩项目顺序
2.Flexbox模型中术语:
1.主轴和侧轴
2.Flexbox模型语法变更:
参考:http://www.runoob.com/css3/css3-flexbox.html
包含每个参数的案例
3.新版本Flexbox模型
1.伸缩容器display(用于伸缩容器)
display:flex | inline-flex;
兼容写法
display: -webkit-flex;/*Safari,Opera,Chrome*/
display: -moz-flex; /*Firefox*/
display: -ms-flexbox; /*IE*/
display: flex;
flex:块伸缩容器
inline-flex:内联伸缩容器
注意:CSS的columns在伸缩容器上没有效果;float、clear和vertical-align在伸缩项目上没有效果。
2.伸缩流方向flex-direction(用于伸缩容器)
flex-direction:row | row-reverse | column | column-reverse ;
row:在ltr排版方式下从左向右排列,在rtl排版方式下从右向左排列
column:类似于row,不过是从上到下排列
row-reverse和column-reverse是与对应的row和column排列方向相反
主要用来创建主轴,从而定义 了伸缩项目放置在伸缩容器的方向
3.伸缩换行flex-wrap(用于伸缩容器)
flex-wrap:nowrap | wrap | wrap-reverse
nowrap:伸缩容器单行显示,在ltr和rtl排版方式下按对应方向排列;
wrap:伸缩容器多行显示,在ltr和rtl排版方式下按对应方向排列;
wrap-reverse:伸缩容器多行显示,但在ltr排版下,伸缩项目从右向左排列;rtl排版下,伸缩项目从左向右排列(和wrap相反)
主要用来定义伸缩容器里是单行显示还是多行显示,侧轴的方向决定了新行堆放的方向
4.伸缩流方向和换行flex-flow(用于伸缩容器)
flex-flow:<’flex-direction’> || <’flex-wrap’>
是伸缩流方向flex-direction和伸缩行换行flex-wrap的缩写版本
同时定义了伸缩容器的主轴和侧轴。
5.主轴对齐justify-content(用于伸缩容器)
justify-content:flex-start | flex-end | center | space-between | space-around
flex-start:伸缩项目向一行的起始位置靠齐
flex-end:伸缩项目向一行的结束为止靠齐
center:伸缩项目向一行的中间位置靠齐
space-between:伸缩项目会平均分布在行里,第一个和最后一个伸缩项目靠着开始和结束位置
space-around:伸缩项目会平均分布在行里,两端保留一半的空间
主要用来定义伸缩项目沿着主轴线的对齐方式。
6.侧轴对齐align-items(用于伸缩容器)和align-self(用于伸缩项目)
设置伸缩项目在侧轴的对齐方式有两种。一种是伸缩项目行在侧轴的对齐方式,由属性align-items控制;另一种是伸缩项目自身在侧轴的对齐方式,主要由属性align-self控制
align-items:flex-start | flex-end | center | baseline | strecth
align-self:flex-start | flex-end | center | baseline | strecth
兼容写法:
-webkit-align-items: center;/*Safari,Opera,Chrome*/
-moz-align-items: center;/*Firefox*/
-ms-flex-align: center;/*IE*/
align-items: center;
flex-start:伸缩项目在侧轴起点边的外边距紧靠在该行在侧轴起始边
flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点边
center:伸缩项目的外边距盒在该行的侧轴上居中放置
baseline:伸缩项目根据伸缩项目的基线对齐
strech:默认值,伸缩项目拉伸填充整个伸缩容器
7.堆栈伸缩行align-content
align-content会改变flex-wrap的行为。与align-items相似,但不是对齐伸缩项目,对齐的是伸缩行。
align-content:flex-start | flex-end | center | space-between | space-around | stretch
flex-start:各行向伸缩容器的起点位置堆叠
flex-end:各行向伸缩容器的终点位置堆叠
center:伸各行向伸缩容器的中间位置堆叠
space-between:各行在伸缩容器中平均分布
space-around:各行在伸缩容器中平均分布,在两边各有一半空间
strech:默认值,各行将会伸展以占用额外的空间
这个属性只有伸缩项目有多行时才生效,在flex-wrap为wrap时,并且没有足够的空间把伸缩项目行放在同一行中。该属性对每一行起作用而不是每个伸缩项目。
8.伸缩性flex
设置属性flex的伸缩容器会等比地按照各伸缩项目的扩展比率分配额外的空间,也会按照收缩比率缩小各伸缩项目以避免伸缩项目溢出伸缩容器
flex:none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
兼容写法:
-webkit-flex: 1;/*Safari,Opera,Chrome*/
-moz-flex: 1;/*Firefox*/
-ms-flex: 1;/*IE*/
flex: 1;
flex-grow:扩展比率
flex-shrink:收缩比率
flex-basis:伸缩基准值
flex属性可以用来指定可伸缩长度的部件:扩展比率、收缩比率和伸缩基准值
9.显示顺序order
order : number
通过order属性来改变伸缩项目出现在源文档的次序,从序号最小的组开始布局
应用:圣杯布局!顺序重组,还实现了中间列的等高效果以及页脚的黏附效果
总结:主要整理了Flexbox模型布局功能、属性术语、语法规范、各版本语法变更和新版本Flexbox模型!除此之外,还有更头疼的是浏览器兼容性,需要多次练习整理才能好好使用伸缩布局模型来解决布局问题。
案例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
padding: 50px;
/*direction: rtl;/!**文本方向*!/*/
}
.flex{
float: left;
display: flex;
/*display: inline-flex;*/
/*flex-direction: column-reverse; /!***子元素文本对齐方式*!/*/
/*justify-content: space-around; /!**主轴方向的对齐方式*!/*/
/*align-items: flex-end; /!**侧轴方向的对齐方式**!/*/
/*flex-flow: wrap; /!**子元素是否可以换行**!/*/
/*align-content: space-around;/!**align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。*!/*/
width: 1000px;
height: 500px;
background-color: grey;
}
.item1{
/*flex: 1;*/
text-align: center;
width: 200px;
height: 30%;
background-color: #6ec8ff;
/*align-self: auto;*/
}
.item2{
flex: 1;
/*order: -1; /!**排列顺序*!/*/
/*margin-right: auto; /!**右侧间距自动*!/*/
/*margin:0 auto; /!**左右侧间距自动*!/!*/
/*align-self: center; /!**相对于父容器的侧轴方向的对齐方式*!/*/
width: 300px;
height: 30%;
text-align: center;
background-color: #e86126;
}
.item3{
flex: 1;
width: 200px;
height: 30%;
text-align: center;
background-color: #e271b4;
/*align-self: flex-end;*/
}
.out{
/*float: left;*/
display: inline-block;
width: 200px;
height: 500px;
text-align: center;
background-color: #73c78f;
}
</style>
</head>
<body>
<div class="flex">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<!--<div class="item1">item4</div>-->
<!--<div class="item2">item5</div>-->
<!--<div class="item3">item6</div>-->
</div>
<div class="out">out</div>
</body>
</html>