CSS flex

前言

flex 可以控制比例縮減分配，也能夠控制膨脹、縮減，順序。

參考範例

1. 先設定flex排版

.container{
  display:flex
}

2. 設定排版方向 flex-direction

預設是row

flex-direction 效果預覽。

.container {
  display: flex;
  flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
}

3. 元素超出螢幕範圍時是否換行 flex-wrap

視窗縮小時，不會被強行擠壓，自動換行。

flex-wrap 預覽效果

.container {
  display: flex;
  flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
}

4. direction 和 wrap 二合一 flex-flow

用flex-flow可以只寫一行，就把direction 和 wrap 二合一。

第一個參數direction，第二個是wrap。

.container {
  display: flex;
  flex-flow:row-reverse nowrap;
}

5.元素對齊的方式之一 justify-content

justify-content是元素對齊的方式

是一種水平排版的方式，但會隨著主軸和副軸產生變化。

justify-content 效果預覽

.container {
  display: flex;
  justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
}

6.元素對齊的方式之二 align-items

align-items是元素對齊的方式

是一種垂直置中的方式，但會隨著主軸和副軸產生變化。

align-items 效果預覽

.container {
  display: flex;
  align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
}

7.多行元素對齊的方式 align-content

align-content是多行元素對齊的方式。

align-content 效果預覽

.container {
  display: flex;
  align-content: stretch|center|flex-start|flex-end|baseline|initial|inherit;
}

CSS Flex個別子元素的排版

1.個別子元素的對齊 – align-self

align-self是針對個別子元素的對齊調整，外層需要是flex。

align-self 效果預覽

.container {
  display: flex;
}

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

2.個別子元素的寬度 – flex-grow & flex-shrink

字面上的意思就是增加與減少，針對個別子元素的寬度調整。

flex-grow 效果預覽

flex-shrink 效果預覽

.container {
  display: flex;
}

.div { 
  flex-shrink:8;
}

.div2 {
  flex-grow:8;
}

3. 最基本的寬度 flex-basis

flex-grow不能使flex-wrap功能運行，會無法跳行。

但是，只要設定了flex-basis之後可以換行。假如設定flex-basis為10rem，只要視窗讓方框小於10rem，它就會換行。

flex-basis有點像是最基本(最小)的寬度。

flex-basis 效果預覽

flex 實際練習