[CSS] Flexbox

Flexbos 是 CSS3 中新的一種排版模式,有些瀏覽器尚未支援,詳細細節可參考此Flexbox

以下速記概念及語法:

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

flex container:

.flex-container {
  // 宣告成 flex 排版模式,只寫flex是區塊元素,寫inline-flex是行內區塊元素
  display: flex | inline-flex;
  
  // 內層 flex items 的排列方向,row是從左到右;row-reverse是從右到左;column是從上到下;column-reverse是從下到上。
  flex-direction: row | row-reverse | column | column-reverse;

  // 各個 flex items 超出container時,nowrap表示不斷行;wrap表示會往下斷行;wrap-reverse表示往上斷行。
  flex-wrap: nowrap(default) | wrap | wrap-reverse;

  //是flex-direction和flex-wrap的簡寫
  flex-flow: <'flex-direction'> || <'flex-wrap'>;

  // flex items 針對 main-axis 來做排列
  justify-content: flex-start(default) | flex-end | center | space-between | space-around;

  // flex items 針對 cross-axis 來做排列
  align-items: flex-start | flex-end | center | baseline | stretch(default);

  // 當 flex container 垂直區有額外的空間時,如何針對 cross-axis 來排列
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex items:

.flex-item {
  // 指定出現的順序
  order: <integer>;
  
  // 如果所有items的flex-grow都設成1,則每個items的寬度都會是一樣的,且會填滿整個container,如果有一個item是2,則該item寬度就是2倍大
  flex-grow: <number>; /* default 0 */

  flex-shrink: <number>; /* default 1 */

  // This defines the default size of an element before the remaining space is distributed.
  flex-basis: <length> | auto; /* default auto */

  // 是簡寫,預設為0 1 auto
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

  // 該 flex item 針對 cross-axis 來做排列,會 override container 的 align-items 屬性
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of