CSS Flex 排版

flex屬性主要分成容器和子層的物件
為什麼要分兩種
因為子層物件本身也可以是容器讓更下層的物件使用
所以flex屬性才需要區分成容器和物件

再來是flex本身就是非常強大的RWD排版語法
flex練熟的話就可以不用bootstrap也能排出很好的RWD版面(不考慮細節美化)

目前主流的Web App很多都已經改成flex排版
可以參考:

• twitch
• discord

tags: web,css, flex

基本語法

父層容器

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

.flex-container {
    display: flex;
}

子層物件

<div class="flex-container">
    <div class="flex-items">1</div>
    <div class="flex-items">2</div>
    <div class="flex-items">3</div>
</div>

.flex-container {
    display: inline-flex;
}
.flex-items {
    flex-grow: 1;
}

詳細語法說明

父層容器 .flex-container

• display
  • flex
  • inline-flex
• flex-flow
  • flex-flow: flex-direction flex-wrap|initial|inherit;
  • 為以下兩種的簡略寫法:
    • flex-direction
      • flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
        • default: flex-direction: row;
        • row - 左上開始往右
        • row-reverse - 右上開始往左
        • column - 左上開始往下
        • reverse 左下開始往上
    • flex-wrap
      • flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
        • default: flex-wrap: nowrap;
        • nowrap - 不換行
        • wrap - 換行
        • wrap-reverse - 從左下往右開始,再往上換行
• justify-content
  • justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
  • default: justify-content: flex-start;
  • flex-start - 靠左
  • flex-end - 靠右
  • center - 置中
  • space-between - 分散(左右不留空)
  • space-around - 平均分散(左右留空)
• align-items
  • align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
  • default: align-items: stretch;
  • stretch - 上下高度自動滿版
  • center - 垂直置中不滿版
  • flex-start - 置頂不滿版
  • flex-end - 置底不滿版
  • baseline - 以文字基線來垂直置中
• align-content
  • align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
  • default: align-content: stretch;
  • 先用flex-wrap排版完,再用排版完的區域調整對齊位置
  • stretch - 每一行都靠上,行分散(沒設定高度時會自動滿版)
  • center - 全部往父容器中心靠
  • flex-start - 全部往上靠
  • flex-end - 全部往下靠
  • space-between - 上下分散(上下不留空)
  • space-around - 上下平均分散(上下留空)

子層物件 .flex-items

• order
  • order: number|initial|inherit;
  • default: 0
  • 從1開始由小到大排序
• flex
  • flex為以下3種屬性的簡化寫法
    • 例: flex: 0 1 auto;
  • flex-grow
    • flex-grow: number|initial|inherit;
      • default: flex-grow: 0;
    • 寬度佔比: 同一排總合當分母,自己當分子
    • 同一行全部設1且有設定基礎寬度時,不足寬度會自動加寬滿版,超過寬度時會自動換行,算是非常強大的rwd語法
  • flex-shrink
    • flex-shrink: number|initial|inherit;
      • default: flex-shrink: 1;
    • 大於1收縮,0以下變寬
  • flex-basis
    • flex-basis: number|auto|initial|inherit;
      • default: flex-basis: auto
    • 基礎寬度或高度,依照排序方向決定(之後還是會依照flex特性動態調整)
• align-self
  • align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
    • default: align-self: auto;

參考資料

• W3Schools - CSS Flexbox