(一)弹性盒
1.设置在容器(父元素上)上:
(1)display:flex; 父元素设置成弹性盒。
规定子项目在父元素主轴方向一行显示,不会换行。侧轴方向会默认拉伸。
(2)设置主轴方向 flex-direction
属性值: row 默认为水平向右
column 垂直向下
row-reverse 水平向左
column-reverse垂直向上
(3)flex-wrap 伸缩换行
属性值:nowrap默认不换行 wrap换行
(4)flex-flow:flex-direction||flex-wrap; 伸缩流主轴方向及换行
(5)设置子项目在容器主轴方向的对齐方式justify-content
属性值:flex-start 默认在主轴方向起点位置对齐
flex-end 在主轴方向终点位置对齐
center 中间
space-between 将空白区域平分在子项目之间
space-around 将空白区域环绕在子项目两边
(6)设置子项目在其所在行的侧轴对齐方式 align-items(单行)
属性值:stretch 默认拉伸
flex-start 子项目在其所在行的起始位置摆放
flex-end 子项目在其所在行的结束位置摆放
center 中间
baseline 子项目在其所在行以基线对齐
(7)设置子项目在侧轴方向的对齐方式 align-content(控制多行)
属性值参考justify-content
2.设置在子项目上
(1) flex:number; 设置子项目在父元素主轴方向的比份
width:10%;
(2) 设置单个子项目在其所在行的侧轴对齐方式align-self
值参考align-items的属性值
(3)order设置子项目的顺序。
写了order的排在没有order属性的元素后面。
写了order的,属性值越小的在越前面。
(二) 媒体查询
页面结构简单使用
屏幕分界点:
超小屏幕xs (移动设备)768px以下
小屏设备sm 768px-992px
中等屏幕md 992px-1200px
宽屏设备lg 1200px以上*/
1.语法 @media screen and (条件){css语法}
2. (1)最小宽度min-width 若当前页面宽度大于min-width的值时,则样式生效。所以媒体查询min-width应从小写到大;
div{
height:200px;
background: pink;
}
@media screen and (min-width:768px){
div{background: red;}
}
@media screen and (min-width:992px){
div{background: green;}
}
@media screen and (min-width:1200px){
div{background: blue;}
}
(2)最大宽度 max-width
页面宽度小于768px,背景色为pink。768-992,red. 992-1200,green。1200+,blue
div{
width: 800px;
height: 800px;
background: blue;
}
@media screen and (max-width:1200px){
div{background: green;}
}
@media screen and (max-width:992px){
div{background: red;}
}
@media screen and (max-width:768px){
div{background: pink;}
}
(3) 设备整个显示区域的最小宽度min-device-width
页面宽度小于768px,背景色为pink。768-992,red. 992-1200,green。1200+,blue
div{
height:200px;
background: pink;
}
@media screen and (min-device-width:768px){
div{background: red;}
}
@media screen and (min-device-width:992px){
div{background: green;}
}
@media screen and (min-device-width:1200px){
div{background: blue;}
}