用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

微信小程序使用Flex容器

Rolan 2020-7-2 00:11

Flex 是 W3C 提出的一種新的布局方案,可以非常方便的完成響應式頁面布局,到目前為止幾乎所有瀏覽器都支持,Flex 是 Flexible Box 的縮寫,翻譯過來是”彈性布局”的意思,下面一起來學習 Flex 布局的使用?;A概 ...

Flex 是 W3C 提出的一種新的布局方案,可以非常方便的完成響應式頁面布局,到目前為止幾乎所有瀏覽器都支持,Flex 是 Flexible Box 的縮寫,翻譯過來是”彈性布局”的意思,下面一起來學習 Flex 布局的使用。

  1. 基礎概念
  2. flex容器屬性
  3. flex項目屬性
  4. 總結

基礎概念

采用 Flex 布局的元素稱為 Flex 容器,所有子元素將自動成為容器成員,也可以稱之為 Flex 項目,也就是該 Flex 布局的子 View ,下面是 Flex 布局默認設置下的示意圖:

如上圖所示,默認的 Flex 容器的存在兩個軸:水平的主軸(main axis)和垂直的交叉軸(cross axis),主軸和交叉軸的方向不是絕對的,而是會因為設置的不同而不同,下面是與主軸和交叉軸相關的幾個位置:

  • 主軸起始點(main start):主軸的開始位置
  • 主軸的結束點(main end):主軸的結束位置
  • 主軸空間(main size):單個 Flex 項目占據的主軸空間
  • 交叉軸的起始點(cross start):交叉軸的起始點
  • 交叉軸的結束點(cross end):交叉軸的結束點
  • 交叉軸空間(cross size):單個 Flex 項目占據的交叉軸空間

flex容器屬性

  1. flex-direction:設置主軸的方向,可設置的值如下:
  • row:默認值,設置主軸為水平方方向,起點在左邊
  • row-revarse:設置主軸為水平方向,起點在右邊
  • column:設置主軸為垂直方向,起點在上邊
  • column-revarse:設置主軸為垂直方向,起點在下邊

2. flex-wrap:設置如何換行,可設置的值如下:

  • nowrap:默認值,不換行
  • wap:自動換行
  • wrap-revarse:自動換行,在第一行的上一行

3. flex-flow:flex-direction 屬性和 flex-wrap 屬性的簡寫形式,默認值為 row nowrap。

4. justify-content:設置項目在主軸上的對齊方式,可設置的值如下:

  • flex-start:默認值,左對齊
  • flex-end:右對齊
  • center:居中對齊
  • space-between:兩端對齊
  • space-around:每個項目兩側的間隔相等,與屏幕邊緣的間隔是其他項目之間間隔的一半
  • space-evenly:平均分布各個項目,與屏幕邊緣的間隔與其他項目之間的間隔相等

5. align-items:設置項目在交叉軸上如何對齊,可設置的值如下::默認值,如果沒有項目未指定高度或設置為auto,則項目會占滿整個容器的高度,可設置的值如下:

  • stretch:默認值,如果沒有項目未指定高度或設置為auto,則項目會占滿整個容器的高度,下面圖示中項目 1 就未指定高度,其余項目都指定了高度
    就未指定高度
  • flex-start:設置與交叉軸的起點對齊
  • flex-end:設置與交叉軸的結束點對齊
  • center:設置與交叉軸的重點對齊
  • baseline:設置項目與項目中第一行文字基線對齊

6. align-content:設置多根軸線的對齊方式,如果只有一個軸則該屬性不生效,可設置的屬性如下:

  • stretch:默認值,軸線占滿整個交叉軸
  • flex-start:設置與與交叉軸的起點對齊
  • flex-end:設置與交叉軸的終點對齊
  • center:設置與交叉軸的中點對齊
  • space-between:設置與交叉軸兩端對齊,軸線之間的間隔平均分布
  • space-around:設置每根軸線兩側的間隔都相等,軸線與軸線的間隔是軸線到交叉軸邊緣間隔的兩倍

flex項目屬性

  1. order:默認值為0,設置項目的排列順序,數值越小,排列越靠前,如下圖所示:

2、flex-grow:設置項目的放大比例,默認值為0,如果存在剩余空間也不放大,如下圖所示:

3. flex-shrink:設置項目的縮小比例,默認值為 1,如果項目空間不足,則項目將縮小,如下圖所示:

上面圖示中,當 flex-shrink 全設置為 0,每個項目不會縮放,所以第四個方塊被擠出去了,而相應的設置 flex-shrink 為 1,則可以在空間不足是進行一定程度的縮放。

  1. flex-basis:項目所占的主軸空間,如下圖所示:

align-self:定義元素自身的對齊方式,該屬性與 align-items 屬性差不多,具體就不一一介紹了,直接上效果圖如下:

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 極客網 來自: 極客網
快乐十分复式