一、布局基础
- flex容器属性
flex-direction： 决定元素的排列方向,同时决定主轴与交叉轴的方向
row：横向排列，column：纵向排列
flex-wrap： 决定元素如何换行 (排列不下时)
nowrap：不换行，warp：自动换行，reverse：反转换行
flex-flow： flex-direction和flex-wrap的简写
例如：flex-flow:row wrap;
justify-content： 元素在主轴上的对齐方式
center: 在主轴上居中对齐，
flex-start(flex-end)：从左(右)开始对齐
space-around：每个元素的padding相同
space-between：每个元素间隔相同
align-items： 元素在交叉轴的对齐方式
flex-start(flex-end)：从上(下)开始对齐
baseline：根据元素内文本对齐 - flex元素属性
flex-grow：当有多余空间时，元素的放大比例
flex-shrink： 当空间不足时，元素的缩小比例
flex-basis： 元素在主轴上占据的空间
flex： 是 grow、shrink、basis的简写
例如：flex: 0 1 50px;
order定义元素的排列顺序,默认为0
align-self定义元素自身的对齐方式 - 相对定位和绝对定位
相对定位的元素是相对自身进行定位，参照物是自己。
例如：
position: relative; // 相对定位
left: 150rpx; // 与原位置的左端距离150
top: 50rpx; // 与原位置的上端距离50
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位。
例如：
position: absolute; // 绝对定位
left: 50rpx; // 与已定位的父级元素左端距离50
top: 50rpx; // 与已定位的父级元素上端端距离50
二、样式基础
1. 尺寸
width: 228rpx; // 宽度
height: 228rpx; // 高度
min-width: //最小宽度
max-width: //最大宽度
min-height: //最小高度
max-height: //最大高度
...
2. 背景
background-color: darkcyan; //背景颜色
...
3. 边框
border-radius: 20%; //边框圆角
border-width: 5px; //边框宽度
border-color: #ddd; //边框颜色
border-style: solid; //边框样式
...
4. 边距
margin: 20rpx; //外边距，边框距离父级元素的距离
margin: 10rpx 20rpx 30rpx 40rpx; // 上右下左
padding: 20rpx; //内边距，边框距离元素的距离
padding: 10rpx 20rpx 30rpx 40rpx; // 上右下左
5. 文本
font-size: 30px; //字体大小
6. 其它(列表、内容、表格...)
PS：样式选择器 与CSS选择器相同，部分不可用
