FlexBox Flex
===
###### tags: `web` `frontend`

**語法**

flex: none | [flex-grow flex-shrink || flex-basis] | initial | auto

- none 在任何情況下都不會發生伸縮
- flex-grow 伸展比率(默認值 0)
讓 flex item 在 flex container 中按照比例來填滿剩餘的空間
- flex-shrink 收縮比率(默認值 1)
當 flex item 把 flex container 擠爆了flex- shrink 就會把 flex item 們縮小成設定的比例
- flex-basis 伸縮基準值
- initial 在有剩餘空間的情況下不會有任何變化，但是在必要的情況下會被收縮
- auto 會根據主軸自動伸縮已佔用的剩餘空間

## flex
- 如果 flex 只填了一個值 (無單位)，那預設就是以 flex-grow 的方式呈現，且等同於 ``flex: 1 0px``

flex: 3;

- 若是填了兩個值

flex: 1 100px;

這會和下方一樣

flex-grow: 1;
flex-basis: 100px;

### **flex: 0 auto**
This is the same as ``flex: initial;`` and the shorthand for the default value: ``flex: 0 1 auto``

## flex: none
無論如何寬度一直都會是 200px
相同於 ``flex: 0 0 auto``

.container {
  display: -webkit-flex;
  display: flex;
}

.none{
  -webkit-flex: none;
          flex: none;
  width: 200px;
}

## flex: initial
空間足夠的時候，寬度是 200px；如果空間不足，會變窄到 100px，但不會再更窄了

.container {
  display: -webkit-flex;
  display: flex;
}

.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}

## flex-grow
flex1會佔滿剩餘寬度的 1/3
flex2會佔滿剩餘寬度的 2/3

.container {
  display: -webkit-flex;
  display: flex;
}

.flex1 {
  -webkit-flex: 1;
          flex: 1;
}

.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

## **flex: auto**
This is equivalent to ``flex: 1 1 auto``

## 參考來源
http://www.oxxostudio.tw/articles/201501/css-flexbox.html
http://sweeteason.pixnet.net/blog/post/42781628-css-flexbox-layout-%E5%AD%B8%E7%BF%92%E5%BF%83%E5%BE%97
http://zh-tw.learnlayout.com/flexbox.html
http://ued.ctrip.com/webkitcss/prop/flex-grow.html
https://css-tricks.com/almanac/properties/f/flex/#article-header-id-0
http://www.w3cplus.com/blog/666.html
http://zhoon.github.io/css3/2014/08/23/flex.html
http://www.w3cplus.com/css3/a-guide-to-flexbox-new.html

<style>
.ui-infobar { display: none; }
</style>