媒体查询&Flex布局
2019-03-08 本文已影响0人
BOB_BI
媒体查询
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
