# Flex Layout
#### Flex Parent ****父屬性布局
- 創(chuàng)建一個(gè)Container,使用Flex.
.container {
display: flex; /* or inline-flex */
}
- 定義Flex方向
- row : 在ltr從左到右,rtl反之. rtl ltr 是文本方向定義,rtl right to left .
- row-reverse : 與row 相反.
- column : 從上往下.
- column-reverse : 從下往上.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
- 定義換行屬性 flex-wrap
- 默認(rèn)Flex布局只有一行.
- nowrap : 只有一行
- wrap : 多行,ltr方向從左到右,rtl反之.
- wrap-reverse : 多行效果與wrap 相反.
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- flex-flow 結(jié)合flex-direction與flex-wrap 同時(shí)設(shè)置.
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
- justify-content 根據(jù)中軸線定義布局的排列對(duì)齊方式.
- flex-start : 默認(rèn)選項(xiàng),頂部對(duì)齊
- flex-end : 底部對(duì)齊
- center : 上下居中
- space-between : 項(xiàng)目是均勻分布在生產(chǎn)線；第一個(gè)項(xiàng)目是在開(kāi)始線，最后一個(gè)項(xiàng)目的終點(diǎn)線.
- space-around: 均勻分布周?chē)?
- align-items
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
- align-content
- 設(shè)置只有一行時(shí)無(wú)效.
#### Flex Children ****子視圖屬性
- order 控制子視圖顯示順序
.item {
order: <integer>;
}
- flex-grow 默認(rèn)1
- 如果所有的項(xiàng)目都有彈性增長(zhǎng)設(shè)置為1贪薪，在容器中的剩余空間將平等地分配給所有的孩子。如果其中一個(gè)孩子的價(jià)值為2与斤，剩下的空間將占用的空間是其他人的兩倍（或至少會(huì)嘗試）。
.item {
flex-grow: <number>; /* default 0 */
}
flex-shrink默認(rèn)1
縮放量化,負(fù)數(shù)無(wú)效
.item {
flex-shrink: <number>; /* default 1 */
}
flex-basis
這定義了在剩余的空間分布之前的元素的默認(rèn)大小。它可以是一個(gè)長(zhǎng)度（如20%撩穿、5rem磷支，等）或關(guān)鍵字。自動(dòng)關(guān)鍵詞就是“看我的寬度或高度的財(cái)產(chǎn)”（這是暫時(shí)由主要尺寸關(guān)鍵詞直到棄用）食寡。內(nèi)容關(guān)鍵字的意思是“基于項(xiàng)目?jī)?nèi)容的大小”這個(gè)關(guān)鍵詞還沒(méi)有得到很好的支持雾狈，所以很難測(cè)試和更難知道它的兄弟會(huì)的內(nèi)容，最小的內(nèi)容抵皱，和適合的內(nèi)容善榛。
If set to 0, the extra space around content isn't factored in. If set to auto, the extra space is distributed based on its flex-grow value. See this graphic.
.item {
flex-basis: <length> | auto; /* default auto */
}
- flex flex-grow, flex-shrink and flex-basis 統(tǒng)一設(shè)置
- 第二第三個(gè)參數(shù)可選(flex-shrink and flex-basis) 默認(rèn)0 1 auto
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
- align-self
- 對(duì)齊方式的單個(gè)屬性,可以覆蓋父屬性的****align-items**** ,對(duì)齊方式與****align-items****相同.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
### ****引用原文**** ****https://css-tricks.com/snippets/css/a-guide-to-flexbox/
