44 lines
1.2 KiB
Plaintext
44 lines
1.2 KiB
Plaintext
弹性盒子
|
||
|
||
主要用来实现布局的兼容
|
||
|
||
13个css属性
|
||
|
||
display: flex 开启弹性盒子 加载父元素上
|
||
|
||
父元素上6个：
|
||
justify-content：设置元素在X轴上的对齐方式
|
||
space-between space-around center
|
||
align-items: 设置单根轴线(x轴) 元素在Y轴上的对齐方式
|
||
center
|
||
多根 align-content
|
||
|
||
flex-wrap: wrap; 一行放不下的时候，进行换行
|
||
flex-direction 设置元素排列方向，
|
||
如果设置column，justify-content 和 align-items 作用交换
|
||
|
||
flex-flow: 是 <flex-direction> || <flex-wrap> 简写
|
||
|
||
|
||
|
||
子元素上6个：
|
||
|
||
flex-grow 设置元素所占的空间比例（放大）
|
||
flex-shrink 设置为0，表示不挤压元素的空间，一般做横向滑动配合overflow-x
|
||
|
||
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
|
||
一般都写一个属性，即表示 flex-grow
|
||
|
||
|
||
align-self 允许某个元素 不遵守父元素上的 align-items 规则
|
||
order 设置元素的位置，数值越小越靠前
|
||
|
||
尺寸兼容
|
||
|
||
rem
|
||
html上的font-size 16px
|
||
你写的单位rem * 基准数值 = 真实的尺寸
|
||
|
||
|
||
1: 媒体查询
|
||
2: js 实现 |