Flex彈性布局詳解

1、Flex彈性布局詳解2009年，W3C提出了一種新的方案-Flex布局，可以簡便、完整、響應式地實現(xiàn)各種頁面 布局。目前，它已經(jīng)得到了所有瀏覽器的支持。.基本概念采用Flex布局的元素，稱為Flex容器（flex container），簡稱“容器”。它的所有子元 素自動成為容器成員，稱為Flex項目（6* item）,簡稱“項目”。.容器的屬性* 1）： flex-direction *規(guī)定盒子容器主軸方向，可以是水平方向和垂直方向，另外側(cè)軸一定是垂直于主軸方向的。* 2）： flex-wrap *規(guī)定flex容器主軸上放不下項目的時候，要不要進行換行，以及怎么換行。*3）：flex-flow

2、 *前面兩個屬性的集合，可以一并設置主軸和換行的屬性。*4）： align-items *控制了項目在flex容器側(cè)軸方向上的對齊方式。*5）： justify-content *控制了項目在flex容器主軸方向上的對齊方式。*6）： align-content *本屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。3.屬性理解flex-direction排布方向?qū)傩岳斫猓篺lex-direction:row你左手拿著肉串，將它橫著擺放在自己的眼前，你發(fā)現(xiàn)：咦，這不就是flex容器的主軸為row 的方向嗎？沒錯了這個樣子就是我們?nèi)粘鴮懛绞较碌闹鬏S默認值：水平從左往右。羊肉粒

3、1號羊肉粒2號羊肉粒3號、羊肉粒4號-洋肉粒5號flex-direction:row-reverse肉串太大了，你左手保持這個姿勢有點累，你換成了右手，你發(fā)現(xiàn)：咦，這不就是flex容器方 向的水平從右往左嗎？沒錯了，row-reverse就是和平時的書寫方式反向的呈現(xiàn)。羊肉粒5號學神揄皤洋肉粒M號羊肉粒2號羊肉粒1號flex-direction:column-reverse埃，右手又累了，換到左手吧，這個時候發(fā)現(xiàn)肉油要滴下來了，你趕忙把羊肉串豎立了起來，你 發(fā)現(xiàn)：咦，這不就是flex容器主軸為column垂直從下到上的方向嗎？沒錯了，主軸的方向這個 時候就是從下往上，側(cè)軸變成了水平垂直方向從左

4、往右。羊肉粒5號牛肉粒4號羊肉粒W號 羊肉轉(zhuǎn)號 *雨海1號 flex-direction: column好吧，我實在想象不出來有誰會把羊肉串從上到下這么拿著，姑且你就是這么拿著的吧。這個時 候，你發(fā)現(xiàn)，咦？這個不就是flex主軸從上到下的方向嗎？沒錯了，這個時候主軸方向還是垂 直方向，只是變成了從上到下。側(cè)軸沒有變化依然是水平方向從左往右。flex-wrap項目換行屬性理解：flex-wrap:wrap運氣不好，竹簽斷了一節(jié)，羊肉粒排不下了，沒辦法只能假裝吃兩根羊肉串了，這時候，你發(fā)現(xiàn)， 這不就是換行嗎？項目在flex 一行中排列不下了，那么wrap屬性值就指定了，這個時候可以進 行換行，第一

5、行在上，第二行在下方。羊囪粒1號羊肉粒2號羊肉粒m號T羋肉粒4號羊肉根5號flex-wrap:wrap-reverse有了之前的經(jīng)驗，很自然的就想到了，反轉(zhuǎn)換行，將原本是最后一行的內(nèi)容換到最上面來。這個 屬性并不是很常用，掌握了 wrap稍加思考就能掌握reverse。羊肉簪:羊肉粒黠昆號羊瀛2號羊肉黑號flex-wrap:nowrap如果你有強迫癥，認為分行就失去了羊肉串的意義，ok滿足你的需求，本屬性概念就是無論flex 容器多么擠，都不進行換行。就好比，哪怕竹簽斷了一節(jié)，都要把肉粒擠在原本的那根竹簽里面。羊肉粒1號羊肉粒2號羊肉粒m號羊肉粒4號羊肉粒5號flex-flow flex-di

6、rection、flex-wrap 屬性的集合：這個屬性是方便偷懶的屬性，就好比margin屬性可以設置top、left、bottom、right四個值。justify-content規(guī)定項目在主軸對齊方式屬性理解：justify-content:flex-start項目從flex容器沿著主軸方向的起始點到終點進行依次緊密排列。將整個羊肉串作為容器，主 軸方向從拿著竹簽的手開始到竹簽尖頭作為結(jié)束，距離手最近的一粒肉作為項目的開始，尖頭處作為項目排隊列的末尾。類似word里面的左對齊。羊肉粒1號羊肉粒2號羊肉粒m號justify-content:flex-end你發(fā)現(xiàn)最上面那一粒距離竹簽尖頭部位

7、還有好長一段為了能夠輕松的吃到羊肉粒，你把羊肉粒 都往尖頭處移動，這個時候，主軸起點就是你的手，主軸末尾就是竹簽的尖頭處，你發(fā)現(xiàn)羊肉粒 距離你的手越來越遠了，離竹簽尖頭處越來越近，那么這個就是flex-end對齊，類似于word 里面的右對齊。王肉粒1號羊肉粒2號羊肉粒m號justify-content: center這個就簡單了，所有內(nèi)部項目沿著flex容器的主軸方向進行居中對齊。當你對你的羊肉串設置justify-content ： center屬性后，你會發(fā)現(xiàn)，你手到最近一顆肉粒的距 離和竹簽尖頭到最近一顆肉粒的距離都是相同的，類似于word里面的居中對齊。 justify-conten

8、t:space-around開吃吧，吃第一粒的時候你又發(fā)現(xiàn)了一個問題，每一粒排列這么緊密，會沾到嘴巴旁邊，感覺不 爽。你開始一粒粒將他們分開，然而這個時候你的強迫癥又犯了，感覺隨便分開每粒之間的距離， 沒有美感。你開始等距離分開每一粒肉，結(jié)果是保證每一粒肉之間的距離都相同，并且首尾兩粒 到主軸起點和終點的距離也都相同。這個在你看來是完美的分段比例。羊肉粒1號羊肉粒2號羊肉粒澗- justify-content:space-between這個例子有點臟，中間的肉粒之間的距離保持相同，距離手最近的那一粒肉直接接觸到了你的手， 也就是手和肉粒之間的距離是0，同樣的，距離竹簽尖頭最近的肉粒和竹簽的距離

9、也是0。實現(xiàn) 了兩端對齊，不知道是怎么想的，我感覺有點臟，手會變得很油膩埃。羊肉粒號 羊鐮!號羊肉黑號align-items項目側(cè)軸排列方式 align-items:flex-start項目在側(cè)軸上對齊的方式是：從側(cè)軸的起點開始進行布局。flex容器內(nèi)項目緊緊貼住容器側(cè)軸 的起始位置（有margin之類的值，會導致出現(xiàn)空缺，符合邏輯）。羊肉粒1號羊肉粒2號羊肉粒3號 align-items:flex-end項目在側(cè)軸上的對齊方式是：從側(cè)軸的結(jié)束位置開始進行布局。flex容器內(nèi)項目緊緊貼在容器 側(cè)軸的結(jié)束位置（有margin之類的值，會導致出現(xiàn)空缺，符合邏輯）。羊肉粒1號羊龐粒號羊肉糠號 ali

10、gn-items:flex-center 項目在容器內(nèi)部的對齊方式是：側(cè)軸方向居中對齊的布局的樣式。flex容器內(nèi)項目距離側(cè)軸起 點和側(cè)軸終點的距離相等。羊肉燧1號羊肉粒，號羊肉粒W號 align-items:flex-stretch項目在容器內(nèi)部的對齊方式是：側(cè)軸方向的空間將被整個項目所充滿。當然要想stretch能起到作用，要滿足的條件是（這里的條件僅在主軸是水平方向適用）：1、 flex容器高度最好是一個固定值；2、容器內(nèi)部項目不要設置高度（這個高度由強大的瀏覽器來 進行計算）。如下圖所示：每一個item高度都不是固定值。 align-items:flex-baseline咋看一下bas

11、eline，翻譯是“基線”，提到這個基線，相信很多同學是深惡痛絕，太難控制。 在flex容器中設置baseline,就會比較簡單合乎常理，我們通過一個簡單的例子來進行理解： 體育課上，老師要求同學一排站好，然后這個老師也天馬行空，認為這樣還是不整齊，然后他搬 來了很多高矮不一的凳子，大家都不知道他要干嘛。后來我才發(fā)現(xiàn)，這哥們認為只有每個人的下 巴在同一條水平線上，這樣才好看，才整齊，那么好了，以誰的下巴為基準呢？我們很自然的得 出，以身高最高的那個同學的下巴作為基準線，那么矮的同學站在凳子上吧，爭取下巴能達到基 準線。回到我們的baseline上面來，這里的基準線要想有效果，需要滿足這么個條件：1、item項目 內(nèi)部最好有內(nèi)容；2、item項目內(nèi)部的lineheight屬性需要設置。那么滿足這樣的條件后，基準線就是lineheight值最大的那個項目作為基準線。其他的Item 只能搬凳子了。羊血粒1號羊血粒2號羊肉瘡3號align-content項目在多跟軸線上的對齊方式，如果只有一根軸線則不起作用，也意思就是要想 該屬性發(fā)揮作用的前提就是必須要讓項目進行分行。要更好的理解這個屬性，我們需要建立一個 整體法的思考方式，就像我們高中物理受