32 lines
1.4 KiB
Plaintext
32 lines
1.4 KiB
Plaintext
布局的动态适配
|
||
|
||
display: flex
|
||
|
||
作用：快速让页面实现居中对齐的（浏览器自动帮我们对齐）
|
||
|
||
总共13个css属性
|
||
|
||
display: flex 开启弹性盒子
|
||
注意：1 在你想设置对齐子元素的最近的那个父元素上开启
|
||
2 父元素如果开启弹性盒子，那么子元素的float、clear和vertical-align将失效
|
||
3 父元素如果开启了弹性盒子，子元素如果没有设置高度，那么子元素的高度默认继承父元素
|
||
|
||
|
||
6个应用在父元素上的
|
||
align-items: center; 设置Y轴对齐的
|
||
justify-content: space-between; 设置X轴对齐的
|
||
flex-wrap: wrap; 设置一行放不下的时候，是否换行（注意：需要手动指定一行放多少个）
|
||
flex-direction 设置元素的排列方向（默认是row 横放）
|
||
注意：如果设置了 column
|
||
那么 align-items 和 justify-content 作用将相互颠倒
|
||
align-content 如果有多行子元素，那么使用这个属性进行对齐
|
||
|
||
|
||
6个应用在子元素上的
|
||
order 设置子元素的排列顺序，数值越小越靠前
|
||
flex-shrink: 0; 让子元素在空间不足的时候不缩小
|
||
一般实现横向滑动
|
||
flex-grow 定义子元素的放大比例
|
||
flex 是 flex-grow flex-shrink flex-basis 的简写
|
||
|
||
flex: 1; 代指： flex-grow: 1 |