HTML5基础-6

伸缩布局(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) {}