目录
flex
简写属性
老版本
容器
项目
新版本
容器
项目
新版本新增
容器
项目
伸缩规则
flex案例
CSS3媒体查询
媒体类型
媒体属性
关键字
多列布局
flex
CSS3弹性盒子（Flexbox），是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运 行/列。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
1.项目永远排列在主轴的正方向上
2.flex分新老版本两种：
-webkit-box
-webkit-flex或flex
3.由于仍有移动端的浏览器内核低，而这些浏览器只支持老版的flex布局
简写属性
flex:1（即flex-basis:0%; flex-grow:1; flex-shrink:1;）
可做等分布局
老版本
容器
1.容器的布局方向
-webkit-box-orient
控制主轴的选取
值：
horizontal 水平
vertical 垂直
2.容器的排列方向
-webkit-box-direction
控制主轴的方向
值：
normal 正方向
reverse 反方向
3.富裕空间管理
只决定富裕空间的位置，不会给项目区分配空间
（1）主轴
-webkit-box-pack
若主轴为x轴：
start 在右边
end 在左边
center 在项目两边
justify 在项目之间
若主轴为y轴：
start 在下边
end 在上边
center 在项目两边
justify 在项目之间
（2）侧轴
-webkit-box-align
若侧轴为x轴：
start 在右边
end 在左边
center 在项目两边
若侧轴为y轴：
start 在下边
end 在上边
center 在项目两边
项目
弹性空间管理
将主轴上的富裕空间按比例分配到各个项目上
-webkit-box-flex:弹性因子
默认值：0 不可继承
新版本
容器
1.容器的布局方向&容器的排列方向
flex-direction
控制主轴的选取和方向
| 属性值 | 效果 |
|---|---|
| row |
x轴（从左往右） |
| row-reverse | x轴（从右往左） |
| column | y轴（从上到下） |
| column-reverse | y轴（从下到上） |
2.富裕空间管理
只决定富裕空间的位置，不会给项目区分配空间
（1）主轴
justify-content
值：
flex-start 在主轴的正方向
flex-end 在主轴的反方向
center 在主轴两边
justify 在项目之间
space-between 在项目之间
space-around 在项目两边
(2)侧轴
align-items
值：
flex-start 在侧轴的正方向
flex-end 在侧轴的反方向
center 在侧轴两边
baseline 基线对齐
stretch 等高布局（项目没有高度）
项目
弹性空间管理
将主轴上的富裕空间按比例分配到各个项目上
flex-grow:弹性因子
默认值：0 不可继承
新版本新增
容器
- flex-wrap
控制容器为单行/列还是多行/列。并且定义了侧轴的方向，就新行/列将沿侧轴的方向堆砌
默认值：nowrap 不可继承
值：
nowrap 不换行，没有侧轴
wrap 侧轴方向由上而下（flex-shrink失效）
wrap-reverse 侧轴方向由下而上（flex-shrink失效）
- align-content
定义弹性容器的侧轴方向上有额外空间时，如何排布每一个行/列。当弹性容器只有一行/列时无效
多行多列时，侧轴空间的管理（把多行多列看成一个整体）
- flex-flow
该属性是设置flex-direction和flex-wrap的简写
默认值：row nowrap 不可继承
控制主轴和侧轴的位置以及方向
项目
- order
该属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照order属性的值的升序进行布局。拥有相同的order属性值的元素按照它们在源代码中出现的顺序进行布局
order越小越前
默认值：0 不可继承
- align-self
该属性会对齐当前flex行中的flex元素，并覆盖align-items的值，如果任何flex元素的侧轴方向margin值设置为auto，则会忽略align-self
默认值：auto 不可继承
值：
auto
设置为父元素的align-items值。如果该元素没有父元素，则设置为stretch
flex-start
flex元素会对齐到cross-axis的首端
flex-end
flex元素会对齐到cross-axis的尾端
center
flex元素会对齐到cross-axis的中间。如果该元素的cross-size的尺寸大于flex容器，将在两个方向均等溢出
baseline
所有的flex元素会沿着基线对齐
stretch
flex元素将会基于容器的宽和高，按照自身margin box的cross-size拉伸
- flex-shrink
该属性指定了flex元素的收缩因子
默认值：1
- flex-basis
伸缩规则计数的基准值（默认为width或height）
伸缩规则
- flex-grow
可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
每项伸缩大小 = (伸缩基准值(flex-basis) + (可扩展空间 x flex-grow值))
- flex-shrink
1.计算收缩因子与基准值乘的总和
var a = 每一项flex-shrink*flex-basis之和
2.计算收缩因数
收缩因数 = (项目的收缩因子 * 项目基准值) / 第一步计算总和
var b = (flex-shrink * flex-basis) / a
3.计算移除空间
移除空间 = 项目收缩因数 * 负溢出空间
var c = b * 溢出空间
flex案例
导航界面
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}a{text-decoration: none;color: gray;display: block; }#nav > .row{display: flex;}#nav > .row > .item{flex: 1;text-align: center;}#nav > .row > .item > a:before{content: "";display: block;width: 86px;height: 86px;margin: 0 auto;}#nav > .row:nth-child(1) > .item:nth-child(1) > a:before{background: url(img/01.png) no-repeat;}#nav > .row:nth-child(1) > .item:nth-child(2) > a:before{background: url(img/02.png) no-repeat;}#nav > .row:nth-child(1) > .item:nth-child(3) > a:before{background: url(img/03.png) no-repeat;}#nav > .row:nth-child(1) > .item:nth-child(4) > a:before{background: url(img/04.png) no-repeat;}#nav > .row:nth-child(1) > .item:nth-child(5) > a:before{background: url(img/05.png) no-repeat;}#nav > .row:nth-child(2) > .item:nth-child(1) > a:before{background: url(img/06.png) no-repeat;}#nav > .row:nth-child(2) > .item:nth-child(2) > a:before{background: url(img/07.png) no-repeat;}#nav > .row:nth-child(2) > .item:nth-child(3) > a:before{background: url(img/08.png) no-repeat;}#nav > .row:nth-child(2) > .item:nth-child(4) > a:before{background: url(img/09.png) no-repeat;}#nav > .row:nth-child(2) > .item:nth-child(5) > a:before{background: url(img/10 .png) no-repeat;}</style></head><body><div id="nav"><div class="row"><div class="item"><a href="javascript:;">天猫</a></div><div class="item"><a href="javascript:;">聚划算</a></div><div class="item"><a href="javascript:;">天猫国际</a></div><div class="item"><a href="javascript:;">外卖</a></div><div class="item"><a href="javascript:;">天猫超市</a></div></div><div class="row"><div class="item"><a href="javascript:;">充值中心</a></div><div class="item"><a href="javascript:;">飞猪旅行</a></div><div class="item"><a href="javascript:;">领金币</a></div><div class="item"><a href="javascript:;">拍卖</a></div><div class="item"><a href="javascript:;">分类</a></div></div></div></body>
</html>CSS3媒体查询
CSS3媒体查询是响应式方案的核心
语法：
@media 媒体类型 and（关键字）带条件的媒体属性 and 带条件的媒体属性 {
规则
}
媒体类型
all 所有媒体（默认值）
screen 彩色屏幕
print 打印预览
媒体属性
width: 浏览器窗口尺寸 （可加max min前缀）
min-width: n px; >=n px
max-width: n px; <=n px
device-width:设备独立像素 （可加max min前缀）
pc端：分辨率
移动端：具体看机器参数
device-pixel-ratio:像素比 （必须加webkit前缀，可加max min前缀）
pc端：1
移动端：具体看机器参数
横竖屏切换:
orientation:landscape 横屏
orientation:portrait 竖屏
关键字
only: 和浏览器兼容性有关（老版本浏览器只支持媒体类型）
and: 连接媒体类型或媒体属性，代表“与”的意思
,: 连接多条查询规则，代表“或”的意思
not: 取反
多列布局
column-width: 指定每一栏的宽度（布局第一种方法）
column-count: 指定多少栏（布局第二种方法）
column-gap: 栏目距离
column-rule: 栏目间隔线