CSS Flex

Vertical Center

.search-wrap{
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

Horizontal Alignment

.flex-end{
    justify-content: flex-end;
}

Columns

.child-item{
	display: flex;
	flex: 1; // 1/N
}

flex attribute for child items
https://www.oxxostudio.tw/articles/201501/css-flexbox.html

flex

好酒沉甕底,有耐心看到下面的才會看到重點喔哈哈!flex 應該是 Flexbox 裏頭最重要的屬性了,而 flex 其實是由三個屬性組合而成,依照先後順序分別是「flex-grow」、「flex-shrink」和「flex-basis」,如果 flex 只填了一個數值 ( 無單位 ),那麼預設就是以 flex-grow 的方式呈現,至於三個屬性的解釋如下:

flex-grow:數字,無單位,當子元素的 flex-basis 長度「小」於它自己在父元素分配到的長度,按照數字做相對應的「伸展」比例分配,預設值為 0,不會進行彈性變化,不可為負值,設為 1 則會進行彈性變化。

flex-shrink:數字,無單位,當子元素的 flex-basis 長度「大」於它自己在父元素分配到的長度,按照數字做相對應的「壓縮」比例分配,預設值為 1,設為 0 的話不會進行彈性變化,不可為負值。

flex-basis:子元素的基本大小,作為父元素的大小比較基準,預設值為 0,也因為預設值為 0,所以沒有設定此屬性的時候,會以直接採用 flex-grow 屬性,flex-basis 也可以設為 auto,如果設為 auto,就表示子元素以自己的基本大小為單位。。

三個屬性可以分開設定,也可以合在一起用一個 flex 統一設定,下面的例子展現出同一個 Flexbox,在不同的寬度,子元素會有不同大小的呈現。( 範例:css-flexbox-demo9.html)

Reference: