第二十一天：UI切版 & 元件-BreakPoint、常用的Flex css

第 12 屆 iThome 鐵人賽

DAY 21

Modern Web

Quasar CLI Framework 邪教：整合分散的前端技術和工具、常見的開發需求系列第 21 篇

12th鐵人賽

通靈亡

2020-10-06 23:59:04

3011 瀏覽

分享至

※ 今天的內容

一、BreakPoint
二、定義Flex容器裡面的元件寬高比例：Flex Grid
三、定義Flex容器裡面的元件是否換行：Flex Wrap
四、定義Flex容器裡面的元件主軸與交錯軸對齊：Flex Aligment
五、總結
六、延伸閱讀

一、BreakPoint

目前大部分的CSS Framework，都有所謂的BreakPoint
用來界定，解析度寬度在多少範圍之間，是屬於什麼螢幕尺寸

要注意的是每一個CSS Framework的BreakPoint都不太一樣

Quasar BreakPoint的界定方式為：
從最小尺寸開始，定義每個尺寸的最大上限值，超過上限值則屬於另一個尺寸
以下是Quasar 各尺寸的 BreakPoint 範圍：

xs: 上限599px (0~599px)
sm: 上限1023px (600px~1023px)
md: 上限1439px (1024px~1439px)
lg: 上限1919px (1440px~1919px)
xl: 1920px以上
https://quasar.dev/style/breakpoints

如果你要修改預設的break-point
可以在src/css/quasar.variables.scss，修改break-point的上限數值：

$breakpoint-xs: 599px;
$breakpoint-sm: 1023px;
$breakpoint-md: 1439px;
$breakpoint-lg: 1919px;

這些BreakPoint會作用在兩個部分
一個是Quasar 的 css class，例如col-sm

另一個就是 $breakpoint-<breakpoint>-<max/min>
方便自行撰寫Media Query

@media (max-width: $breakpoint-sm-max) {
    
}

二、定義Flex容器裡面的元件寬高比例：Flex Grid

(一) Flex-Grid Row

將一個水平方向的可用寬度分成12等分
定義每個區塊，在指定尺寸的解析度寬度下，佔可用寬度的12分之幾
超過的部分會跑到下面

外層的容器需設定class="row"
https://quasar.dev/layout/grid/row

比例制定方式：預設(col)→小尺寸(col-xs、col-sm)→中大尺寸(col-md、col-lg、col-xl)
例如：預設佔12等分→sm尺寸佔6等分→md尺寸佔4等分→lg尺寸佔2等分

<div class="col-12 col-sm-6 col-md-4 col-lg-2"></div>

1.col、col-<breakpoint>
平均分配剩下的寬度

例如：150px(灰色) + .col(黃色) + .col(黃色) + 150px(灰色)

<div class="row">
    <div style="width: 200px;"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div style="width: 200px;"></div>
</div>

在任何尺寸的解析度寬度，中間的兩個紅色DIV會均分旁邊兩個灰色DIV佔掉後的剩餘空間

例如:
預設：150px(灰色) + .col-12(黃色) + .col-12(黃色) + 150px(灰色)

sm尺寸：150px(灰色) + .col-sm(黃色) + .col-sm(黃色) + 150px(灰色)

<div class="row">
    <div style="width: 150px" class="bg-grey">width: 150px</div>
    <div class="col-12 col-sm bg-yellow">.col-12.col-sm</div>
    <div class="col-12 col-sm bg-yellow" >.col-12.col-sm</div>
    <div style="width: 150px" class="bg-grey">width: 150px</div>
</div>

2. col-auto、col-<breakpoint>-auto
寬度由容器裡面的內容長度決定

例如：col-auto(灰色) + col-auto(橘色) + col(黃色) + col(灰色)

除了黃色的DIV，其他三個DIV的寬度是裡面的內容決定

<div class="row">
    <div class="col-auto bg-grey">col-auto</div>
    <div class="col-auto  bg-orange">.col-auto .col-auto</div>
    <div class="col bg-yellow" >.col</div>
    <div class="col-auto bg-grey">col-auto</div>
</div>

3. col-<breakpoint>-xx、col-<breakpoint>-xx
在某個尺寸的解析度範圍，佔整個版面的幾等分

例如：
預設：col-12(灰色) + col-12(橘色) + col-12(黃色) + col(灰色)
由於該列(<div class="row">)已經沒有其他空間，所以col(灰色)不會顯示

sm尺寸以上：col-sm-3(灰色) + col-sm-4(橘色) + col-sm-3(黃色) + col-sm-2(灰色)

md尺寸以上：col-md-2(灰色) + col-md-2(橘色) + col-md-2(黃色) + col-md(灰色)

 <div class="row">
    <div class="col-12 col-sm-3 col-md-2 bg-grey">.col-12 col-sm-3.col-md-2</div>
    <div class="col-12 col-sm-4 col-md-2 bg-orange">.col-12 col-sm-4.col-md-2</div>
    <div class="col-12 col-sm-3 col-md-2 bg-yellow" >.col-12.col-sm-3. col-md-2</div>
    <div class="col col-sm-2 col-md bg-grey">.col.col-sm-2.col-md</div>
  </div>

(二) Flex-Grid column

將一個垂直方向的可用高度分成12等分
定義每個區塊，在指定尺寸的解析度寬度下，佔可用寬度的12分之幾
超過的部分會跑到旁邊

外層的容器需要定義指定高度，並設定class="column"
https://quasar.dev/layout/grid/column

預設： col-3(灰色) + col-3(橘色) + col-4(黃色) + col-2(灰色)

md尺寸以上：col-md-6(灰色) + col-md-6(橘色) + col-md-6(黃色) + col-md-6(灰色)

<div class="column"  style="height: 250px">
    <div class="col-3 col-md-6 bg-grey">col-3 col-md-6</div>
    <div class="col-3 col-md-6 bg-orange">"col-3 col-md-6</div>
    <div class="col-4 col-md-6 bg-yellow" >col-4 col-md-6</div>
    <div class="col-2 col-md-6 bg-grey">col-2 col-md-6</div>
  </div>
</div>

(三) Gutter

定義在一個容器當中，每個元件之間的等距寬度
https://quasar.dev/layout/grid/gutter#Introduction

  <div class="q-gutter-sm bg-yellow">
    <q-btn color="teal" label="Button"></q-btn>
    <q-btn color="teal" label="Button"></q-btn>
    <q-btn color="teal" label="Button"></q-btn>
    <q-btn color="teal" label="Button"></q-btn>
    <q-btn color="teal" label="Button"></q-btn>
    <q-btn color="teal" label="Button"></q-btn>
    <q-btn color="teal" label="Button"></q-btn>
    </div>
</div>

賦予flex Grid容器當中，每個元件的水平與垂直間距：

<div class="row q-col-gutter-md">
    <div class="col-12 col-sm-4">
      <div class="bg-grey">col-12 col-sm-4</div>
    </div>
    <div class="col-12 col-sm-4 ">
      <div class="bg-yellow">
        col-12 col-sm-4 q-col-gutter-md
      </div>
     </div>
    <div class="col-12 col-sm-4 ">
      <div class="bg-orange">
        col-12 col-sm-4 q-col-gutter-md
      </div>
    </div>
</div>

三、定義Flex容器裡面的元件是否換行：Flex Wrap

定義當裡面的元件超過外層row的寬度，或者超過外層column的高度時，是否強制換行或換列

class	Description
wrap	Wrap if necessary (“on” by default, no need to specify it)
no-wrap	Do NOT wrap even if necessary
reverse-wrap	Wrap backwards if necessary

(1)no-wrap:超過不換行

超過row 12等分：

<div class="row no-wrap">
    <div class="col-6 bg-grey">col-6 bg-grey</div>
    <div class="col-9 bg-yellow">col-9 bg-yellow</div>
</div>

超過column 12等分

<div style="height:150px;" class="column no-wrap">
    <div class="col-6 bg-grey">col-6 bg-grey</div>
    <div class="col-9 bg-yellow">col-9 bg-yellow</div>
</div>

(2)wrap:超過換行

超過row 12等分：

<div class="row wrap">
    <div class="col-6 bg-grey">col-6 bg-grey</div>
    <div class="col-9 bg-yellow">col-9 bg-yellow</div>
</div>

超過column 12等分：

<div style="height:150px;" class="column wrap">
    <div class="col-6 bg-grey">col-6 bg-grey</div>
    <div class="col-9 bg-yellow">col-9 bg-yellow</div>
</div>

(3)reverse-wrap:超過換行並顛倒順序

超過row 12等分為例：

<div class="row reverse-wrap">
    <div class="col-6 bg-grey">col-6 bg-grey</div>
    <div class="col-9 bg-yellow">col-9 bg-yellow</div>
</div>

超過column 12等分：

<div style="height:150px;" class="column reverse-wrap">
    <div class="col-6 bg-grey">col-6 bg-grey</div>
    <div class="col-9 bg-yellow">col-9 bg-yellow</div>
</div>

四、定義Flex容器裡面的元件主軸與交錯軸對齊：Flex Aligment

定義flexbox容器裡面元件的水平與垂直對齊方式

1.主軸(row:水平方向，column:垂直方向)：

(https://quasar.dev/layout/grid/introduction-to-flexbox)

2.交錯軸(row:垂直方向，column:水平方向)：

(https://quasar.dev/layout/grid/introduction-to-flexbox)

範例：水平+垂直置中

<div class="row justify-center items-center">
     <div class="col-3 bg-grey" style="height:100px;">col-3</div>
     <div class="col-6 bg-orange" style="height:200px;">col-6</div>
</div>