1. 弹性布局

flex弹性布局,了解弹性布局先要了解弹性布局中的四个概念

1.弹性布局的容器: 指要实现布局效果的父元素
2.弹性布局的项目: 指要实现布局效果的子元素
3.主轴:指弹性布局的多个项目排列方向上的一根轴。
4.交叉轴: 指与主轴交叉的一根轴称为交叉轴
需要注意的是: 当设置了flex布局之后,子元素的float、clear、vertical-align的属性将会失效.

flex弹性布局,容器属性

使父元素成为弹性布局容器,display: flex或者display: inline-flex
1.flex-direction:指定容器的主轴及其排列方向
  默认值为row指主轴是x轴，项目从最左端开始向右排列;  值为row-reverse指主轴是x轴，项目从最右端开始向左排列;  值为column指主轴是y轴，项目从上向下排列;  值为row-reverse指主轴是y轴，项目从下向上排列.
2.flex-wrap: wrap|nowrap|wrap-reverse 默认值nowrap
3.flex-flow 可同时设置flex-direction和flex-wrap两个属性
4.justify-content: 项目在主轴上的对齐方式
  默认值为flex-start表示以主轴的起点对齐;flex-end以主轴的终点对齐;center在主轴上居中对齐;space-between表示在主轴上两端对齐;space-around表示在主轴上每个项目的间距相同
5.align-items: 定义所有项目在交叉轴上的统一对齐方式
  默认值为stretch
  flex-start表示以交叉轴的起点方向对齐;flex-end以交叉轴的起点方向对;center以交叉轴的中线居中对齐; baseline: 以交叉轴的基线对齐(项目的第一邗根子的基线对齐); stretch: 如果项目未设置尺寸，就让项目在交叉轴上占满所有空间.
6. align-content: 定义了多根轴线的对齐方式, 
  默认值stretch多根轴线平分ringside垂直方向; flex-start轴线全部在交叉轴上的起点对齐; flex-start轴线全部在交叉轴上的终点对齐; center轴线全部在交叉轴上的中间对齐; space-between轴线两单对齐;space-around: 每个轴线两侧的间隔相等

flex弹性布局项目属性

1. order: 专门定义项目的排列顺序
2. flex-grow: 定义项目的放大比例,默认值为0,表示不放大. 
3. flex-shrink: 定义项目的缩小比例,默认值为1,表示空间不足时等比缩小.
4. align-self: 单独定义某一个项目在交叉轴上的对齐方式
5. flex-basis:定义了在分配多余空间之前, 项目占据的主轴空间. 
  默认值auto,即项目本来的大小; 值为0%,即把该项目视为0尺寸,比如:当主轴为x轴,宽度width:50px这个属性失效.
6. flex: 设置flex-grow、flex-shrink和flex-basis的值
   快捷值: auto(1,1,auto); none(0,0,auto);
     当flex取值为非负数字,该数字代表flex-grow的值,flex-shrink为1,flex-basis为0%;
     当flex取值为长度或者百分比,视为flex-basis的值,flex-grow为1,flex-shrink为1;
               

2. 居中对齐

1. 水平对齐

场景一: 父元素是块级元素, 子元素是块级的情况下
1.margin: 0 auto;
2.计算. 父元素和子元素都设置border-size: border-box; 指定父元素的padding-left或者margon-left为(父宽-子宽)/2
3. 父相子绝.
  如果子元素宽度已知: 父元素相对定位,子元素绝对定位,子元素设置left: 50%;margin-left: -子元素宽度/2;
  如果子元素宽度未知: 父元素相对定位,子元素绝对定位,子元素设置left: 50%;transform: translateX(-50%);
4. flex弹性布局:display:flex;flex-direction:row;justify-content:center;

2. 垂直对齐

场景一: 父元素是块级元素, 子元素是行内元素

如果单行, 设置父元素inline-height等于自己的高度
如果多行,将父元素设置display: inline-block;vertical: middle

场景二: 父元素是块级元素, 子元素是块级元素

1. 将父元素设置display: inline-block;vertical: middle
2. flex弹性布局:display:flex;flex-direction:column;justify-content:center;
3. 父相子绝:.
  如果子元素高度已知: 父元素相对定位,子元素绝对定位,子元素设置top: 50%;margin-top: -子元素宽度/2;
  如果子元素高度未知: 父元素相对定位,子元素绝对定位,子元素设置top: 50%;transform: translateY(-50%);
  

3. 垂直水平同时居中

1.父相子绝
2.flex弹性布局display:flex;justify-content:center;align-items:center;

3. rpx、px、rem、em、%、vh、vw

4. 响应式布局

5. 媒体查询

6. sass的常用功能

7. css构建三角形

8. 缩放