媒体查询&Flex布局

媒体查询

1.@media(max-width:800px) and (min-width:300px){
300~800的样式
}
2.<link ... @media="(max-width:800px) and (min-width:300px)">
3.手机端要加一个 meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Flex布局

image.png

flex container的属性

flex-direction 方向
flex-wrap 换行
flex-flow ：row nowrap；上面两个的简写
justify-content ：
-space-between item之间间隔
-space-around item两边有边距
-flex-start item往起点靠
-flex-end item往终点靠
-center 居中
align-items：
-stretch默认值 将所有元素延伸到和最高的一样高
-flex-start item往上靠
-flex-end item往下靠
-baseline 基线对齐
align-content：纵向的同align-items

flex item的属性

flex grow 增长比例（空间过多时）按比例分配多余的空间

image.png

flex-shrink 收缩比例（空间不够时）
flex-basis 默认大小
flex ：1 2 100px 上面三个的简写
order：顺序（代替双飞翼）

image.png
align-self：单独设置自己的对齐方式

flex布局

1.top和底部固定，中间自适应
将中间设置flex-grow：1;over-flow:auto;

image.png

image.png

image.png

4.完美居中

image.png

练习：http://flexboxfroggy.com/#zh-cn