35 lines
1.4 KiB
Plaintext
35 lines
1.4 KiB
Plaintext
属性：
|
||
|
||
1：父元素
|
||
|
||
【常用】display: flex 表示开启弹性盒子
|
||
【常用】align-items: center; 垂直对齐方式
|
||
【常用】justify-content: space-around; 水平对齐方式
|
||
【常用】flex-direction: row; 设置元素的排列方式，x ， y
|
||
【常用】flex-wrap: wrap; 设置元素一行排不下的时候是否换行
|
||
|
||
align-content 定义多根轴线的时候（Y）对齐方式
|
||
|
||
|
||
|
||
2：子元素（flex-grow【wiedth,margin】，align-self【定位】）
|
||
|
||
order: 设置元素的位置，数值越小越靠前
|
||
flex-grow: 35; 设置元素的所占空间的比例（放大） 数值越大，元素所占空间越大
|
||
flex-shrink：设置元素的所占空间的比例（缩小） 数值越大，元素所占空间越大
|
||
flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
|
||
flex： flex-grow, flex-shrink 和 flex-basis
|
||
align-self: flex-end; 设置某个子元素和整体不一样的对齐方式
|
||
|
||
|
||
rem：
|
||
|
||
基准值 * 你设置的数值(rem) = 最终网页的尺寸
|
||
100px(html) * 2rem == 28px
|
||
|
||
37.5px * 2rem == 75px
|
||
|
||
|
||
1：媒体查询
|
||
|
||
2: js获取当前屏幕的 dpi，然后根据dpi动态的计算出 基准值，然后修改html的font-size |