伸缩布局(flex)
概念
伸缩布局[弹性布局]
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.
任何一个容器都可以指定为 Flex 布局。
设置盒子为伸缩盒子
display: flex;
例如:
.box {
display: flex;
}
伸缩盒子两条轴
主轴(main axis): 默认水平从左向右
侧轴(cross axis): 始终垂直于主轴
设置主轴方向(flex-direction)
flex-direction: row(默认水平方向) | row-reverse(水平方向从右向左排列) | column(垂直方向从上向下) | column-reverse(垂直方向从下向上)
设置在主轴的对齐方式(justify-content)
justify-content: flex-start(默认值从左往右) | flex-end(从右往左) | center(居中对齐) | space-between(两端对齐中间等距) | space-around(两端的距离是中间距离的一半)
设置在侧轴的对齐方式(align-items )
align-items: flex-start(最上面显示,高度不设置就是文字的高度) | flex-end(最下面显示,高度不设置就是文字的高度) | center(垂直居中对齐,高度不设置就是文字的高度) | baseline(基线对齐) | stretch(默认值,元素拉伸和容器一样高)
设置元素是否换行显示(flex-wrap)
flex-wrap: nowrap | wrap(换行显示)
设置元素换行后的对齐方式(align-content )
align-content: flex-start| flex-end | center| space-between | space-around |stretch(默认对齐方式)
设置子元素的伸缩比(flex )
flex 属性定义子元素平均分配剩余空间,该子项目占多少份。
.item {
flex: <number>; /* default 0 */
}
设置子元素自己的对齐方式(align-self )
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果父元素没有,则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
设置子元素的排序方式
order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
媒体查询
什么是媒体查询?
1, 媒体指的就是各种设备(移动设备,PC设备)
2, 查询指的就是要检测属于哪种设备
总结:
媒体查询:通过查询当前属于哪种设备,让网页能够在不同的设备下正常的预览
媒体查询的核心是什么?
实现页面在不同设备下正常预览.[判断当前设备]
媒体类型
将不同的设备划分为不同的类型,称为媒体类型
- all (所有的设备)
- print (打印设备)
- screen(电脑屏幕,平板电脑),智能手机
媒体特性
用来描述设备的特点,比如宽度,高度...
- width 网页显示区域完全等于设置的宽度
- height 网页显示区域完全等于设置的高度
- max-width / max-height 网页显示区域小于等于设置的宽度
- min-width / min-width 网页显示区域大于等于设置的宽度
- orientation: portrait (竖屏模式) | landscape (横屏模式)
语法关键字
目的将媒体类型和媒体特性链接到一块,进行设备检测
- and 可以将多个媒体特性链接到一块,相当于且
- not 排除某个媒体特性 相当于非,可以省略
- only 指定某个特定的媒体类型, 可以省略
语法
- 外联式语法
<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">
- 内嵌式语法
@media only screen and (max-width: 420px) {
body {
background-color: red;
}
}
备注: 多个条件联写
@media only screen and (width: 320px) and (height: 568px) {}