Flex彈性布局詳解

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

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

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

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

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

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

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

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

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

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

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