媒体查询&Flex布局

媒体查询

1.@media(max-width:800px) and (min-width:300px){
300~800的样式
}
2.
3.手机端要加一个 meta

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

你可能感兴趣的:(媒体查询&Flex布局)