微信小程序布局篇课程构思----Position+Flex

简单的回顾屏幕适配

整体观思考布局问题

一 Flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$

1.Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局,行内元素也可以使用;

.box{
  display: flex;
  /*display: inline-flex; */
}

相关知识点:

1.行内元素:行内元素适合显示具体内容，而块级元素适合做布局

2.行内元素可以与块级元素通过Display相互转换

3.设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

2.Flex重要概念

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

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

3.容器的属性

6个重要属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

(1).flex-direction

属性决定主轴的方向（即项目的排列方向）。
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

(2).flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

• nowrap（默认）：不换行,每个项目都会压缩差不多等比例缩小
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

(3).flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

(4) justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

(5)align-items属性

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

(6)align-content属性

align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中,
align-content属性只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

知识点:

flex布局中align-items 和align-content的区别

4.项目的属性

• order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
• flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。
- flex-basis flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
- flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
- align-self align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

二.Position：absolute —–绝对布局

1. 绝对定位的第一个特征在于会从文档流中脱离，不受其他元素影响，定位是“绝对”的，所以称之为绝对定位，如果是相对定位，会受其他元素影响，则定位是“相对”的；
2. 生成绝对定位的元素，相对于 static 定位以外的相对于第一个具有定位属性的祖先元素进行定位。
3. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
4. 标准文档流:说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

.top-left {
  position: absolute;
  background-color: red;
  margin-top: 50rpx;
  margin-left: 50rpx;
}

.top-right {
  position: absolute;
  background-color: yellow;
  margin-top: 50rpx;
  margin-right: 50rpx;
  top: 0rpx;
  right: 0rpx;
}

.bottom-left {
  position: absolute;
  background-color: orange;
  bottom: 0rpx;
  left: 0rpx;
  margin-bottom: 50rpx;
  margin-left: 50rpx;
}

.bottom-right {
  background-color: blueviolet;
  position: absolute;
  bottom: 0rpx;
  right: 0rpx;
  margin-bottom: 50rpx;
  margin-right: 50rpx;
}

设问:

1. 如果去掉”left”, “top”, “right” 以及 “bottom” 属性布局会怎么样
2. 如果去掉”left”, “top”, “right” 以及 “bottom” 属性布局margin-top,margin-bottom,margin-left,margin-right会怎么样
3. 如何实现布局居中
4. 绝对定位精解

三.Position：Relative —–相对定位

1. 如何定位？
   每个元素在页面的普通流中会“占有”一个位置，这个位置可以理解为默认值，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置。（在父级节点的content-box区定位，父级节点有文字的话，元素的默认位置则是紧随文字）
2. 不会改变行内元素的display属性。
3. 并没有脱离普通流，只是视觉上发生的偏移。

四.z-index：重叠 —帧布局

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！