41 lines
1.2 KiB
Plaintext
41 lines
1.2 KiB
Plaintext
display: flex 开启弹性盒子
|
||
|
||
|
||
弹性盒子
|
||
|
||
作用：快速布局，各种对齐，各种排列
|
||
|
||
12个属性
|
||
|
||
6个应用在父元素上
|
||
align-items 只有一行元素的时候，让子元素在父容器的Y轴中对齐 center
|
||
align-content 多行元素的时候，让多个子元素在父容器的Y轴中对齐 center
|
||
|
||
justify-content 让子元素在父容器的X轴中对齐 space-around
|
||
flex-direction 改变元素的排列方向 row(横着放) column（竖着放）
|
||
flex-wrap wrap 一行排不下的时候，自动换行
|
||
|
||
flex-flow flex-direction和flex-wrap简写
|
||
|
||
6个应用在子元素上
|
||
order 设置元素顺序，数值越小越靠前
|
||
flex-grow 通过设置比例的方式，改变元素所占空间比
|
||
flex-shrink: 0; 设置元素的缩小比例，0 表示不要缩小
|
||
flex-basis 设置元素的宽度
|
||
flex 是flex-grow, flex-shrink 和 flex-basis
|
||
一般都是写 flex: 数值 一个参数，表示设置 flex-grow
|
||
align-self 允许单个元素设置不同的对齐方式
|
||
|
||
|
||
rem
|
||
|
||
尺寸的单位，他可以动态的改变
|
||
|
||
rem 计算规则
|
||
|
||
10rem * 16px(html 上默认的font-size的数值) = 160px
|
||
|
||
font-size 改变的方式：
|
||
|
||
1：css 媒体查询 media
|
||
2：js 来计算 |