55 lines
1.2 KiB
Plaintext
55 lines
1.2 KiB
Plaintext
flex + rem
|
||
|
||
flex : 布局的自动适配
|
||
|
||
13个属性
|
||
|
||
第一个
|
||
|
||
display: flex 开启弹性盒子
|
||
|
||
|
||
应用在父元素 6
|
||
|
||
justify-content 设置水平方向对齐
|
||
align-items 设置垂直方法对齐
|
||
flex-direction 设置元素的对齐方式（垂直对齐还是水平对齐）
|
||
flex-wrap 设置元素是否换行
|
||
|
||
不常用
|
||
flex-flow: <flex-direction> || <flex-wrap>;
|
||
align-content 设置多根轴线的对齐方式
|
||
|
||
|
||
应用在子元素 6
|
||
order 设置元素的排列位置，数值越小越靠前
|
||
flex-grow 根据设置的比例自动占剩余空间
|
||
flex-shrink 元素开启弹性盒子后，默认数值为1，将压缩元素，我们希望不压缩的时候可以通过这个属性来设置：0
|
||
场景：横向滑动
|
||
flex-basis 设置元素宽度，优先级比width高
|
||
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
|
||
align-self 运行某个元素设置不同的对齐方式（垂直方向）
|
||
|
||
rem ：尺寸的自动适配
|
||
|
||
设置一个基准值，你写的 尺寸 * 基准值 == 实际的宽高
|
||
|
||
10px --> 10rem
|
||
|
||
默认16px
|
||
|
||
盒子模型 预留
|
||
|
||
自动换行
|
||
|
||
css3 完成
|
||
|
||
rem 完成
|
||
|
||
给你们UI图，教你们切图 完成
|
||
|
||
带你们写一个psd，剩下的给你们自己写 完成
|
||
|
||
pc 页面
|
||
|