微信小程式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都可以.