flex有兩個(gè)核心：軸和容器。軸決定了布局的方向为居。容器決定了flex作用目標(biāo)和范圍戚宦。Flexbox布局最適合應(yīng)用程序的組件和小規(guī)模布局（一維布局）
一艺配。作用在flex容器上(6個(gè)）
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1. flex-direction 值為： row row-reverse column column-reverse
row為默認(rèn)值钢猛，為當(dāng)前文檔流水平流方向伙菜，一般為從左到右，row-reverse為反方向厢洞。
column 顯示為列仇让，column-reverse為反方向。
2. flex-wrap 值為 nowrap wrap wrap-reverse
nowrap躺翻，默認(rèn)值丧叽，表示單行顯示，不換行公你。在子項(xiàng)寬度之和超過(guò)容器時(shí)踊淳，表現(xiàn)為：顯示為一行并溢出，或者壓縮子項(xiàng)顯示為一行不溢出陕靠。具體情況要看子項(xiàng)width 的min-content 和 fit-content
wrap迂尝，寬度不足時(shí)換行顯示。
3. flex-flow 是flex-direction 和 flex-wrap的縮寫同事表示這連個(gè)屬性剪芥；
寫法如下：flex-flow: row wrap;
4. justify-content 值為：flex-start flex-end center space-between space-around
決定了水平方向子項(xiàng)的對(duì)齊和分布垄开。和text-align類似，不過(guò)前者控制flex元素對(duì)齊税肪，后者控制內(nèi)聯(lián)元素對(duì)齊溉躲。
5.align-content 值為：stretch flex-start flex-end center space-between space-around space-evenly
和justify-content相似且對(duì)立。表示垂直方向每一行flex元素的對(duì)齊和分布
6.align-items 值為：stretch flex-start flex-end center baseline
和align-content看起來(lái)很像益兄，但這里針對(duì)的是每一個(gè)子項(xiàng)item锻梳，而不是一行
二，作用在子項(xiàng)上的flex（6個(gè)）
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1.order 值為整數(shù)净捅，默認(rèn)0
表示某個(gè)子項(xiàng)的排序位置
2.flex-grow 值為正數(shù)（包括小數(shù)）和0疑枯，默認(rèn)值是0(表示不擴(kuò)展）
規(guī)則，容器剩余空間為1蛔六，flex-grow值小于1時(shí)荆永，按值的比例增長(zhǎng)擴(kuò)展，大于1則占滿国章。多個(gè)子項(xiàng)都設(shè)有flex-grow值并且總值大于1時(shí)屁魏，按他們的比例分配空間。
3.flex-shrink 值為正數(shù)（包括小數(shù)）和0捉腥，默認(rèn)值是1（表示都收縮）0表示不收縮氓拼。主要處理當(dāng)flex容器空間不足時(shí)候，單個(gè)元素的收縮比例
和flex-grow有點(diǎn)類似抵碟。flex-grow用在空間有多余桃漾。flex-shrink用在空間不夠。
只一個(gè)子項(xiàng)設(shè)置flex-shrink,
- 值小于1拟逮，則收縮不完全撬统，仍會(huì)有一部分溢出
- 值大于等于1，則完全收縮敦迄，正好填滿恋追。
有多個(gè)子項(xiàng)設(shè)置了flex-shrink
- 值得總和小于1凭迹，收縮不完全，每個(gè)元素按比例就是設(shè)置的值
- 值得總和大于等于1苦囱，收縮完全嗅绸，每個(gè)元素按比例收縮
4. flex-basis 定義了分配剩余空間之前元素的默認(rèn)大小。默認(rèn)值為auto
5. flex
flex屬性是flex-grow撕彤，flex-shrink和flex-basis的縮寫鱼鸠。通常有3個(gè)寫法
flex默認(rèn)值，等同flex：0 1 auto;
flex:none羹铅，等同于flex: 0 0 auto;
flex:auto蚀狰，等同于flex: 1 1 auto;
6.align-self
和align-items類似，不過(guò)align-items表示所有子項(xiàng)职员，align-self只表示自己麻蹋。他們的用法一樣。
值為：auto flex-start flex-end center baseline stretch
唯一的區(qū)別是多了auto這個(gè)值焊切，表示繼承flex容器的align-items屬性值哥蔚。
