前言:

之前曾經在下面這篇有提到 CSS display 的一些用法,但那時候忽略了 Flex 

Responsive Web Design (RWD) 響應式網站開發教學與心得

因為覺得有點麻煩,而且有些舊瀏覽器不太支援

但是最近才知道原來他好用的跟什麼一樣,所以這篇就來記錄學習的心得與練習一些範例

而且因為RWD的興起讓 Flexbox 排版方式好像已經慢慢變成趨勢了,因為他在排版使用上彈性比較大

所以應該是要好好了解一下才對~

但還是要先來看看各瀏覽器的支援程度,以防學了結果瀏覽器很多都沒支援

IE一向都是進步的反指標,IE 10 已經有支援了而IE 9也越來越少了,所以應該可以開始學了

但是在 IE 上面使用還是要注意一下可能會有存在一些 bug

而且 IE 僅支援 2012 版本的語法,使用前最好要先查一下

https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

 

這篇也有目錄

A、Flexbox 結構

B、Flexbox layout 可用的屬性們

一、Flex Container:

display

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

二、Flex Item:

flex-grow

flex-shrink

flex-basis

flex

align-self

三、自己的練習:

horizontal menu

 

開始進入學習 Flexbox 的心得

Flexbox 中文意思就是可伸縮靈活的盒子,所以它用途就是讓容器內的子項目能夠靈活改變寬、高、大小、排序...等

他跟一般的 CSS版面設計不太一樣,他最初被推出來是用來解決傳統 CSS 比較沒辦法輕易達到的效果 

像是 div 垂直置中,之前可能要使用 display: table + display:table-cell

但使用 Flex layout 就只要一行就寫完了

Flex 也跟一般的 CSS 不太一樣,他有他自己專屬的屬性,而在結構上他分為兩個部分

Flex Container:flex 容器

Flex Item :flex 子項目

關於結構也可以參考一下下圖,圖來自 MDN ,W3C 也有圖,但是我覺得 MDN 得比較清楚

橘色是設定為 flex 的容器,裡面有三個藍色的 flex item 

main axis

main axis 是 flex 容器的主軸,所有的 flex 項目 都依照 main axis 而排列

但 main axis 會依照 flex-direction 的屬性設定來決定該怎麼排列,所以他不一定是橫的

main start、main end

main start、main end 指的是 main axis這個主軸的起始跟結束位置

cross axis

是一個垂直交叉於 main axis 的主軸,他的方向也會因為 flex-direction 而改變

cross start、cross end

cross start、cross end 指的是 cross axis 這個軸的起始與結束位置

main size

指的是 flex 子項目裡的寬或高,方向也是依照 flex-direction 屬性而改變 

cross size

指的是 flex 子項目裡的寬或高,方向也是依照 flex-direction 屬性而改變 

看完了結構再來就是了解最重要的該如何使用

 

Flexbox layout 可用的屬性們

剛剛提到flexbox layout 分成兩個部分 flex container、flex item

所以下面用 flex container 跟 flex item 來各別列出可用的屬性

Flex Container

  • display 

用法

#container  {
    display: flexinline-flex ;
}

說明

用來將容器定義為 flex container,flex 就等同於 block 

block 跟 inline 的差異請看之前寫的這篇 7. 關於 CSS 的 display

  • flex-direction

用法

#container {
    flex-direction: row | row-reverse | column | column-reverse;
}

說明

上面提到 flex item 會跟著 flex 的 main axis 依序排列

而main axis 則會跟著 flex-direction 的屬性設定來決定方向

row:由左到右

row-reverse : 由右到左

column : 由上到下

column-reverse : 由下到上 

可以參考一下這個範例來看看效果 :  (自行切換Result、CSS、HTML 頁簽)

  • flex-wrap

用法

#container {
     flex-wrap: nowrap | wrap | wrap-reverse;
}

說明

flex-wap 主要用來定義 flex container 裡面是單行顯示還是多行顯示,預設是 nowrap  不換行

nowrap:不換行

wrap:換行

wrap-reverse:換行但方向相反

以下是w3c的範例圖

demo:

  • flex-flow:

用法

#container{
     flex-flow: <'flex-direction'> || <'flex-wrap'>
}

說明

flex-flow 是 flex-direction 跟 flex-wrap 的混合體,可以一次決定兩個屬性,像下面這樣使用

flex-flow: row-reverse wrap; 或 flex-flow: row nowrap; 

感覺就像是 border-width:1px;  + border-style:solid; + border-color:#cccccc;

等於 border: 1px solid #cccccc; 一樣的感覺

  • justify-content:

用法

#container {
     justify-content: flex-start | flex-end | center | space-between | space-around;
}

說明

再看一下這張結構圖:

justify-content 可以用來決定 flex item 對齊的方式

上面有提到 flex item 的排列方向是由 flex-direction 來決定,而對齊的方式就是由 justify-content 來決定

flex-start:flex item 往 main start 的方向對齊

flex-end:flex item 往main end 的方向對齊

center:flex item 在 cross start 軸上置中對齊

space-between:flex item 平均分配在 main axis 軸上,但第一個 flex item 位於 main start,最後一個位於 main end 

space-around:flex item 平均分配在 main axis 軸上,但兩端保留一半的空間 

可以看看下面的效果

  • align-items:

用法

#container {
      align-items: flex-start | flex-end | center | baseline | stretch;
}

說明

align-items 跟 justify-content 剛好相反,align-items 是設定垂直的對齊方式

flex-start:flex item 往 cross start 的方向對齊

flex-end:flex item 往 cross end 的方向對齊

center:垂直置中

baseline:flex item 會依照各個 item 的基準線對齊

stretch:將所有元素撐開至填滿 flex container

  • align-content

用法:

#container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

說明:

align-content 的對齊方式有點像 justify-content 的分散 + align-items 的垂直對齊的綜合

但他對齊的基準線是 cross axis,而且如果只有一行是沒有效果的

必須 main axis 軸上有換行的元素才有效果

flex-start:所有內容會靠往 cross-start 對齊

flex-end:所有內容會靠往 cross-end 對齊

center:會在 cross axis 上置中所有內容

space-between:將空白平均分配到每行內容之間,第一行靠在 cross-start,最後一行靠在 cross-end

space-around:平均分配空白到每行內容之間

stretch:自動將多餘的空間補滿 (預設)

 

以上就是 flex container 的屬性

再來看看子項目 flex item 可以操作的屬性有哪些

 

Flex Item

  • order:

用法:

.item {
    order: <integer>;
}

說明:

這個屬性真的很神奇又方便,他可以決定 flex item 在 flex container 中排列的順序

數字由大到小排序,如果沒設定的話就是 0 

直接來看用法比較有 fu

  • flex-grow:

用法:

.item {
    flex-grow: <number>;  /* 預設 0 */
}

說明:

設定了這個屬性就會讓 flex item 在 flex container 中按照比例來填滿剩餘的空間

既然是要填滿剩餘的空間,那當然 flex item 不能一開始就把 flex container 塞爆

一樣來看看實際用法比較有 fu 

  • flex-shrink:

用法:

.item {
    flex-shrink: <number>; /* 預設 1 */
}

說明:

flex-shrink 跟 flex-grow 剛好相反,flex-shrink 用途是在當 flex item 把 flex container 擠爆了

flex-shrink 就會把 flex item 們縮小成設定的比例,它會根據 flex-shrink 的值來決定縮小的倍數

設定為0的時候就不會改變 (不可以為負)

  • flex-basis

用法:

.item {
    flex-basis: <length> | auto; /* default auto */
}

說明:

這個屬性會依照 flex item 定義的最小寬度或高度

當需要伸縮的時候就會依照 flex-grow or flex-shrink 來伸縮,有點類似 min-width

基本上要跟 flex-grow、flex-shrink 一起合用,預設是 0 會只使用 flex-grow 來縮放

如果設為 auto,就表示子元素以自己的基本大小為單位

下面是只使用 flex-basis 的情況,感覺跟 min-width 差不多

  • flex

用法:

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

說明:

flex 是 flex-grow、flex-shrink、flex-basis 三個屬性所組成

就有點像 border:1px solid #cccccc; 是由 border-width、border-style、border-color 所組成一樣

如果 flex 只填了一個值 (無單位),那預設就是以 flex-grow 的方式呈現

第二、三個參數 (flex-shrink 和 flex-basis) 可不給,預設值為 0 1 auto

建議都用這個屬性來設定,不要用上面的 flex-grow、flex-shrink、flex-basis 分開設定

這個我沒有寫範例來練習 = = 但是在 jsfiddle 看到一個高手寫的可以參考一下

http://jsfiddle.net/teddyrised/wP5UP/2/  (點進去操作拖拉卷軸會比較有感覺)

  • align-self

用法:

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

說明:

align-self 可以讓你為單獨的子元素設置 align-items 行為,會覆蓋父元素 align-items

auto:預設值,元素繼承了父容器的 align-items 屬性,如果沒有父容器則為 stretch

flex-start:內容 往 cross start 的方向對齊

flex-end:內容 往 cross end 的方向對齊

center:內容垂直置中

baseline:會依照各個 item 的基準線對齊

stretch:將所有元素撐開至填滿 flex item

下面的範例父元素使用了 align-items:center; 告訴 flex items 要垂直置中對齊

但第二個 flex item 使用了 align-self 覆寫了覆元素的 align-items:center; 為 align-self:flex-end;

 

結束了,屬性就以上這些,safari 要記得加前置詞 -webkit-

 

參考資料如下:

下面這網站除了介紹外還有一些練習很實用~~

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

下面這個網站有範例可以參考很不錯

http://fight-ikea.logdown.com/posts/231608-css-flexbox

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

W3C:https://www.w3.org/TR/css-flexbox-1/

 

自己的練習:

傳統使用 inline 做成的 horizontal menu 

使用 flexbox layout 做的 horizontal menu

 

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(0) 人氣()