CSS Flex 讓你一次深入了解

Flex 這個技術來講,它解決了以往排版上很多很多很多的問題,但它最大的問題就是支援度的問題,也就是在舊版瀏覽器是不支援的,像是 IE 9 之前的舊瀏覽器就不支援,IE 10、IE 11 瀏覽器部分支援 Flex。

如下圖:

CSS Flex 讓你一次了解
Can I use

所以如果在專案上有要相容舊的瀏覽器,會比較難使用 Flex 技術,可能還會需要用到 float,而且單純的只有 leftrightnone 這三種,如果在專案上不需要顧慮 IE 瀏覽器,非常恭喜你,就大膽地用吧!

在這邊也參考了 W3C 的網站,列出所有 flexbox 的屬性跟值給大家參考,至於詳細的介紹還是可以看 W3C 關於 Flexbox 的文件

屬性屬性介紹可用的值
display外容器flex | inline-flex
flex-direction決定內元件排序方向row | row-reverse | column | column-reverse
flex-wrap是否換行nowrap | wrap | wrap-reverse
flex-flowflex-direction 與 flex-wrap 的縮寫<‘flex-direction’> || <‘flex-wrap’>
justify-content主軸對齊flex-start | flex-end | center | space-between | space-around
align-items交錯軸對齊flex-start | flex-end | center | baseline | stretch
align-content上一個屬性的多行版本flex-start | flex-end | center | space-between | space-around | stretch
flex內元件flex-grow | flex-shrink | flex-basis
align-self可以調整內元件交錯軸的對齊設定(主軸線則不能另外做設定)auto | flex-start | flex-end | center | baseline | stretch
order可以重新定義元件的排列順序,順序會依據數值的大小排列<數字>

以下介紹基本的用法

display 外容器屬性

介紹基本的 display flex 用法,我們用簡單的例子作範例,先做一個簡單排版,程式碼如下:

<div class="wrap">
  <div class="item">
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
  <div class="item">
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
  <div class="item">
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
</div>
.wrap {
  width: 960px;
  margin: auto;
  background: #ccc;
}

.item {
  width: 300px;
  margin: 0 10px;
  background-color: #ffa;
}

然後你看到的畫面會是長這樣,如下圖

CSS Flex 讓你一次了解

接著在 css 第 5 行裡加上一行 display: flex;,基本的外容器屬性就寫好了!

.wrap {
  width: 960px;
  margin: auto;
  background: #ccc;
  display: flex;  /* 這行 */
}

畫面會長這樣,如下圖:

CSS Flex 讓你一次了解

一開始要宣告為 display: flex 才能使用,如果沒有宣告,大部分的屬性都無法作用了,那預設會是橫排的,解決了早期用 float 的寫法做橫排呈現。

還有另一個語法是 display: inline-flex,它的作用就類似於 inline-block + flex

flex-wrap 換行屬性

假設我們內容有很多,程式碼如下,你會發現內容無法換行

<div class="wrap">
  <div class="item">
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
  <div class="item">
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
  <div class="item">
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
  <div class="item">
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
  <div class="item">
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
  <div class="item">
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
</div>

這時候我們就要用 flex-wrap: wrap; 屬性讓內容換行!

我們在 css 第 6 行加上這一行,但畫面會不明顯,所以我們在 .item 調整一下 margin,再預覽。

.wrap {
  width: 960px;
  margin: auto;
  background: #ccc;
  display: flex;
  flex-wrap: wrap;  /* 這行 */
}

.item {
  width: 300px;
  margin: 0 10px 10px;  /* 調整這行 */
  background-color: #ffa;
}

畫面就會長這樣了,如下圖:

CSS Flex 讓你一次了解

是不是很方便!

其他屬性有 flex-wrap: nowrap; (不換行) 與 flex-wrap: wrap-reverse; (換行時反轉)可以用!

justify-content 內容水平對齊屬性

有五種屬性分別為:

  • justify-content: flex-start; // 靠左對齊
  • justify-content: flex-end; // 靠右對齊
  • justify-content: center; // 水平置中
  • justify-content: space-between; // 間與間空格
  • justify-content: space-around; // 周圍空格

我們這次讓畫面變寬點,寬度調整到 1300,CSS 加上 justify-content: flex-start;

.wrap {
  width: 1300px;  /* 調整這行 */
  margin: auto;
  background: #ccc;
  display: flex;
  flex-wrap: wrap;  
  justify-content: flex-start;  /* 這行 */
}

.item {
  width: 300px;
  margin: 0 10px 10px;  
  background-color: #ffa;
}
CSS Flex 讓你一次了解
( justify-content: flex-start; )

內容區塊就會靠左,再把 CSS 第 7 行換掉為 justify-content: flex-end;
就會靠右,剩下直接做畫面呈現給大家看,就不一一貼程式碼囉。

CSS Flex 讓你一次了解
( justify-content: flex-end; )
CSS Flex 讓你一次了解
( justify-content: center; )
CSS Flex 讓你一次了解
( justify-content: space-between; )
CSS Flex 讓你一次了解
( justify-content: space-around; )



align-items 內容垂直對齊屬性

有五種屬性分別為:

  • align-items: flex-start; // 從上面對齊
  • align-items: flex-end; // 從上面對齊
  • align-items: center; // 從中間對齊
  • align-items: baseline; // 從文字基準線對齊
  • align-items: stretch; // 區塊伸展對齊

我們先調整一下 html 內容,可以方便辨識差異,再加上 CSS align-items: flex-start;

<div class="wrap">
  <div class="item"> <!-- 增加內容 -->
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
  <div class="item"> <!-- 減少內容 -->
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
  <div class="item"> <!-- 減少內容 -->
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
    我是內容我是內容我是內容我是內容我是內容我是內容我是內容
  </div>
</div>
.wrap {
  width: 1000px;  /* 調整寬度 */
  margin: auto;
  background: #ccc;
  display: flex;
  align-items: flex-start;  /* 加這行 */
}

.item {
  width: 300px;
  margin: 0 10px 10px;
  background-color: #ffa;
}

呈現結果就會像這樣子如下圖:

CSS Flex 讓你一次了解
( align-items: flex-start; )

剩下直接做畫面呈現給大家看,就不一一貼程式碼囉!

CSS Flex 讓你一次了解
( align-items: flex-end; )
CSS Flex 讓你一次了解
( align-items: center; )
CSS Flex 讓你一次了解
( align-items: stretch; )

以上這些屬性是基本最常用的 Flex 語法,和過去不同,Flex 已經是主流的 CSS 屬性,現在許多 CSS 框架也都是使用 Flex 來作網格排版。搭配著範例,動手玩玩看能夠更快速的了解 Flex 喔。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *