微信小程序UI基础 - Flex布局

一. flex容器属性详解

---

1.1 flex-direction

flex-direction决定元素的排列方向.

view中有多个元素, 其中的元素默认是行排列的.

.container1 {
  height: 100%;
  width: 100%;
  background-color: rosybrown;
  display: flex;
  /* 默认方式(不写flex-direction为row) */
  /* 默认方式从左到右是主轴,从上到下是交叉轴;(也就是说默认是行排列的) */
  /* flex-direction: row; */
  /* row-reverse : 表现和row相同, 但是置换了主轴起点和主轴终点 */  
  /* 若以column排列的话,从上到下是主轴, 从左到右是交叉轴.
  /* flex-direction: column; */
  /* column-reverse : 表现和column相同, 但是只换了主轴起点和主轴终点 */
}

默认(row)排列方式:

row-reverse排列方式:

column排列方式:

1.2 flex-wrap

flex-wrap决定元素如何换行(排列不下时)

初始值 : ​​nowrap​​

flex-wrap 指定flex元素单行显示还是多行显示. 如果允许换行, 这个属性允许你控制行的堆叠方向.

.container1 {
  height: 100%;
  width: 100%;
  background-color: rosybrown;
  display: flex;
  flex-direction: row;
  /* no-wrap(默认) : flex元素被摆放到一行, 这可能会导致移除flex容器 */
  /* flex-wrap: no-wrap; */
  /* wrap-reverse : 和wrap的行为一样, 但是元素将会上下倒置,从底部开始,往上排列 */
  flex-wrap: wrap-reverse;
  /* wrap : flex元素被打断到多个行中.若该行容纳不下改元素的宽度, 则会换行 */
  /* flex-wrap: wrap; */
}

1.2.1 flex-flow

​​flex-flow: row no-wrap;​​(初始值)

根据上面的形式可以猜到, flex-flow是1.1和1.2的简写. 将两者写到一起.

1.3 justify-content

justify-content : 元素在主轴上的对齐方式

justify-content : 定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间

它的属性非常多.默认值为 ​​normal​​

​​justify-content: center;​​ : 所有元素居中

​​justify-content: flex-start;​​ : 所有行左对齐

​​justify-content: flex-end;​​ : 所有行右对齐

​​justify-content: space-around;​​ : 所有元素居中显示, 且间距相等,平分距离

​​justify-content: space-between;​​ : 两端元素与边界对齐, 中间元素平分

1.4 align-items

align-items : 元素在交叉轴的对齐方式

/* align-items: flex-start; */ : 元素向交叉轴起点对齐

/* align-items: flex-end; */ : 元素向交叉轴终点对齐.

/* align-items: center; */ : 元素在交叉轴居中.

/* 当flex元素没有设置高度的时候, 自动让flex元素占满整个容器的高度*/

/* align-items: stretch; */

/* 让元素以元素里面的文字底线对齐 */

/* align-items: baseline; */

二. flex元素属性详解

---

2.1 flex-grow

flex-grow : 当有多余空间时, 元素的放大比例

/* flex-grow:0; 容器有多余空间时,容器宽度不变, 若为1, 则占满容器宽度*/

flex-grow: 1;

2.2 flex-shrink

flex-shrink : 当空间不足时, 元素的缩小比例

默认值为1

若为0,则该元素不进行压缩,

其余值则代表压缩的比例.

2.3 flex-basis

flex-basis : 元素在主轴上占据的空间

2.3.1 flex

flex是上面三个的简写.

flex : 0 1 50rpx; (grow shrink basis)

2.4 order

order : 定义元素的排列顺序

通过给指定元素添加该属性, 设置不同的值, 来调整排列的顺序

2.5 align-self

align-self : 定义元素自身的对齐方式

3. 相对定位和绝对定位

---

相对定位的元素是相对​​自身​​​进行定位, 参照物是​​自己​​.

绝对定位的元素是相对​​离它最近的一个已定位的父级元素​​(若父元素都没有定位,则会与页面) 进行定位.

Tips: 已定位的父级元素absolute和relative都可以.

相对定位 : 不脱离文档流相对自身元素行偏移

绝对定位 : 脱离文档流相对与已定位的父级元素进行偏移