移动端：弹性盒子 / 多列 / 适配方案

多列

colum-count 5	列数
colum-gap 50px	列间距
colum-rule dashed 3px pink	间距线

弹性盒子

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型是提供子元素进行排列、对齐和分配空白空间

弹性容器(Flex container){
display:flex;  
display:-webkit-flex;
}

弹性盒子基本概念

采用 Flex 布局的元素称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）；单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

弹性盒子容器属性

弹性容器(Flex container)
flex-direction 子元素排列方式	row/row-reverse/column/column-reverse 水平(默认)/垂直
flex-wrap 子元素换行方式	nowarp/wrap/wrap-reverse/initial/inherit 单行（不换行，子元素会缩放）/多行，自动换行/换行，反转排列/初始化默认效果相似/默认（不换行）
flex-flow	flex-direction || flex-wrap 默认值 row nowrap
justify-content 子元素水平/主轴排列	flex-start/flex-end/center/space-between/space-around 开始/结束/居中/靠两旁/等间距靠两旁
align-items 子元素垂直/交叉轴排列	flex-start/flex-end/center/baseline/stretch 顶端/底端/居中/基线/默认auto
align-content 设置多根轴线的对齐方式	多行wrap时可用 stretch/flex-start/flex-end/center/space-between/space-around 默认/顶端、底端、居中、两端、平均分布

项目属性

弹性子元素(Flex item)
order子元素顺序	order：1，值越小越靠前 可以为负值
flex按比例分配元素	flex:比例值
flex: none 默认值为0 1 auto	<‘flex-grow’> <‘flex-shrink’> <‘flex-basis’> 两个快捷值：auto (1 1 auto) / none (0 0 auto)
flex-grow 项目的放大比例	默认为0，即如果存在剩余空间，也不放大
flex-shrink 项目的缩小比例	默认为1，即如果空间不足，该项目将缩小
align-self 允许单个项目有与其他项目不一样的对齐	align-self:auto/flex-start/flex-end/center/baseline/stretch 有父元素按align-item值走，无父元素按stretch走/靠顶端/靠底端/居中/基线/以父元素为参考点走
resize元素是否是由用户调整大小的	resize: none/both/horizontal/vertical 无、两边、水平、垂直
outline-offset	轮廓线距离 位于margin
子元素对齐	margin:auto;对象留白

添加元素
祖先元素	direction:ltr/rtl 排列方向

移动端适配方案

1）viewport（scale=1/dpr）
2）rem
3）flex
4）vm/vh

1. meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放

width：设置layout viewport 的宽度，为一个正整数，或字符串"width-device"；
initial-scale：设置页面的初始缩放值，为一个数字，可以带小数；
minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数；
maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数；
height：设置layout viewport 的高度，这个属性对我们并不重要，很少使用；
user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许；

<meta name="viewport" content="width=device-width,initial-scale=1">

1. rem:font size of the root element
   fontSize公式：width/fontSize = baseWidth/baseFontSize；
   动态设置fonSize

2. vm/vh:CSS单位
   表示视区宽度/高度，视区总宽度为100vw, 总高度为100vh；