49 lines
987 B
Plaintext
49 lines
987 B
Plaintext
媒体查询（响应式）：
|
||
|
||
|
||
作用：让pc网站兼容手机屏幕
|
||
|
||
html4
|
||
|
||
|
||
|
||
html5
|
||
|
||
|
||
|
||
|
||
弹性盒子
|
||
|
||
display: flex; 开启弹性盒子 (在最近的父标签上)
|
||
|
||
|
||
只要开启：子元素全部放一行
|
||
|
||
就算这一行放不下，也放一行
|
||
|
||
子元素如果没有设置高度，那么子元素高度自动继承父元素
|
||
|
||
总共13个css属性
|
||
|
||
6个用在父元素上
|
||
|
||
align-items 设置垂直方向的对其方式 center
|
||
justify-content 设置水平方向的对其方式
|
||
flex-wrap 决定元素是否换行
|
||
在子元素上设置宽度，人为创造一行放不下的情况
|
||
|
||
flex-direction 决定元素的排列方向 column
|
||
align-items 水平方向
|
||
justify-content 垂直方向
|
||
|
||
|
||
align-content
|
||
和 align-items 作用一样，但这个是设置多行的
|
||
|
||
6个用在子元素上
|
||
|
||
flex-grow 定义元素的放大比例，
|
||
|
||
flex-shrink 让元素不缩放
|
||
|
||
flex: 就是 flex-grow 简写 |