iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 3
1
自我挑戰組

30 天 CSS 隨手筆記系列 第 3

30 天 CSS 隨手筆記 - 第 03 天 - WTF... Flexbox~!! ( 2 / 3 - 屬性介紹 )

完全無關的前言
昨天發現文章如果寫太長的話,要點擊編輯器的 toolbar 的話,要滑到很上面才能使用,有這麼一點不方便。
因此簡單的寫了一個小書籤,會讓 toolbar 固定在視窗的最下方,稍微方便一點點 XD

  1. 在書籤列點擊右鍵,並選擇 新增網頁
  2. 在名稱欄位,輸入 固定 iThome 編輯列
    在網址欄位,輸入 javascript:jQuery('.editor-toolbar').css({ position:'fixed',left:0,right:0,bottom:0,zIndex:10000,borderTop:'1px solid',boxShadow:'0 0 0' });
  3. 之後編輯文章時,點擊剛剛新增的書籤,固定列就會跑到最下方了 d(● v ●)b

前言

昨天的文章,用 flexbox 寫了一個簡單的範例;今天則準備分別紀錄各個屬性的設定值。

不過網路上已經有太多好文章了,之前都用 A Complete Guide to Flexbox :: CSS Tricks 來當 cheat sheet 的,還有圖示,寫得很清楚。

後來為了方便,也在 codepen 上寫了一個簡陋的 Flexbox Cheat Sheet ,可以操作網頁並觀察上方版面的變化 ( 一邊實驗很方便 XD )。

最前面也有背景跟基礎介紹:

Flex Container
flex container 有兩個軸: main axiscross axis ,並且這兩個軸是有方向性的。

  1. main axis 是 flex items 的主要排列分方向;
    預設方向是由左至右,左側為 main start 、右側為 main end
  2. cross axis 的方向重直於 main axis
    預設方向是由上至下,上方為 cross start 、下方為 cross end

Flex Container 上的屬性

基本設定

  1. display
    允許的值: flex / inline-flex ( 兩種的差別類似 block 跟 inline-block )
    設定後就立即產生效果 ( 同時,子元素的 float / vertical-align 等等屬性會失效 )。

子元素的排列方向設定

  1. flex-direction
    允許的值: row / row-reverse / column / column-reverse
    預設值: row

    可以用來定義 main-axis 的方向:
    flex-direction

  2. flex-wrap
    允許的值: nowrap / wrap / wrap-reverse
    預設值: nowrap

    nowrap 狀態下,子元素只會顯示在同一列中;
    如果想要可以多行顯示的話,則可以用 wrap / wrap-reverse 來定義 cross-axis 的方向。
    http://ithelp.ithome.com.tw/upload/images/20161219/20103812Lwg6P5ilSJ.png
    ( http://codepen.io/team/css-tricks/pen/1ea1ef35d942d0041b0467b4d39888d3 )

shorthand - flex-flow

// 原來的設定方式
flex-direction: column;
flex-wrap: wrap;

// 可以縮寫成
flex-wrap: column wrap;

  1. justify-content
    允許的值: flex-start / flex-end / center / space-between / space-around
    預設值: flex-start

    用以設定子元素在 main-axis 方向上的對齊方式
    justify-content

  2. align-items
    允許的值: flex-start / flex-end / center / baseline / stretch
    預設值: stretch

    用以設定子元素在單列上 cross-axis 方向的對齊方式
    align-items

  3. align-content
    允許的值: flex-start / flex-end / center / space-between / space-around / stretch
    預設值: stretch

    可以設定 flex items 各列間的對齊方式。
    ( 既然是 "各列間",就代表只有單行時是沒有效果的 )
    align-content


Flex Items 上的屬性

  1. order

    預設值:0
    允許的值:整數 ( 負的也可以 )

    數字越小,可以排得越前面~!!
    如果我們想在小螢幕 / 大螢幕下切換 flex items 的排列順序的話,調整這個就可以了 <3

  2. flex-grow

  3. flex-shrink

  4. flex-basis

shorthand - flex
允許的寫法有四種:

flex: <flex-grow>;
flex: <flex-grow> <flex-shrink>;
flex: <flex-grow> <flex-shrink> <flex-basis>;

/* 等同於 "flex: 0 0 auto;" */
flex: none;  

這三個值後面會分別敘述,大致是:

  1. flex-grow - container 空間有餘時,可以擴張的幅度 ( 預設:0 )
  2. flex-shrink - container 空間不足時,要被壓縮的幅度 ( 預設:1 )
  3. flex-basis - 基礎的佔位 ( 預設:auto )

跟直覺不太一樣,但用了後覺得蠻有道理的 XDD

W3C 文章裡的這個圖就解釋的很明確:

( from: https://www.w3.org/TR/css-flexbox-1/#flex-property )

  1. align-self

    跟 flex container 上的 align-content 類似,
    只是在 container 上是統一設定,在 item 上則是個別設定。


上一篇
30 天 CSS 隨手筆記 - 第 02 天 - WTF... Flexbox~!! ( 1 / 3 - what & why & how )
下一篇
30 天 CSS 隨手筆記 - 第 04 天 - WTF... Flexbox~!! ( 3 / 3 - 實作練習 )
系列文
30 天 CSS 隨手筆記30

尚未有邦友留言

立即登入留言