38 lines
1.2 KiB
Plaintext
38 lines
1.2 KiB
Plaintext
flex 弹性盒子
|
||
|
||
为了实现网页快速（很多事情交给浏览器去做）布局
|
||
|
||
布局兼容
|
||
|
||
13个css属性
|
||
|
||
第一个，开启弹性盒子(父元素身上)：
|
||
display: flex;
|
||
|
||
6个应用在父元素上的
|
||
|
||
flex-direction 设置元素排列方向 默认 row，可以设置 column 实现垂直放
|
||
flex-wrap 设置元素换行的，前提：手动设置一行放不下的条件才会换行
|
||
justify-content 设置元素在X轴的对齐方向
|
||
align-items 单行的时候设置元素在Y轴的对齐方向
|
||
align-content 多行的时候设置元素在Y轴的对齐方向
|
||
|
||
flex-flow flex-direction 和 flex-wrap 的简写
|
||
|
||
6个应用在子元素上的
|
||
order 改变元素的排列顺序，数值越小，越靠前
|
||
flex-grow 设置元素的放大比例
|
||
flex-shrink 设置元素的缩小比例 （0 是不缩小）
|
||
flex-basis 和width类似，主要用来设置元素宽度
|
||
flex 一个数值的时候是 flex-grow 的意思
|
||
align-self 允许某个元素在垂直方向设置不一样的对齐方式
|
||
|
||
|
||
rem 一种可以动态改变大小的字体尺寸单位
|
||
|
||
你写的尺寸 10rem * html上默认的font-size 16 == 160px
|
||
|
||
如何动态改变rem的 font-size 基准值
|
||
|
||
1：媒体查询
|
||
2：js实现 |