目录
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: 栏目间隔线