這里提供一個(gè)可以邊學(xué)習(xí)邊玩的flex學(xué)習(xí)網(wǎng)站：彈性盒青蛙
一、Flex布局是什么？
Flex布局是指彈性布局，其中Flex是Flexible Box的縮寫(xiě)，用來(lái)為盒狀模型提供最大的靈活性。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對(duì)齊能力。本文將介紹幾種常見(jiàn)屬性使用方法，以后也將不斷更新補(bǔ)充（也歡迎大家一起在評(píng)論區(qū)補(bǔ)充或私聊我）。
二、屬性
1. justify-content 屬性
用于（水平）對(duì)齊彈性容器的項(xiàng)目，其值可以是：flex-start(居左),flex-end(居右),center(居中),space-between（靠邊的等間距展開(kāi)）,space-around（等間距展開(kāi)）;
如：justify-content:space-around
如：justify-content:space-between
2. align-items屬性
用于（垂直）對(duì)齊彈性容器的項(xiàng)目，其值可以是：flex-start(居上),flex-end(居下),center(居中),baseline（容器基線處）,stretch（拉伸以適應(yīng)）;
如：align-items:flex-end;
3. flex-direction屬性
用于決定項(xiàng)在容器中的放置方向，其值有：row(文本方向)、row-reverse（文本方向相反）、column（從上到下）、column-reverse（從下到上）。
使用flex-direction:row-reverse之后就變成了
注意，當(dāng)方向設(shè)置為反轉(zhuǎn)的行或列時(shí)，開(kāi)始和結(jié)束也會(huì)反轉(zhuǎn)，垂直和水平方向也要隨著改變。具體如下：
要使得上圖青蛙對(duì)應(yīng)進(jìn)入相同顏色盒子應(yīng)該：flex-direction:row-reverse;justify-content:flex-end;變化后如下：
4. order屬性
根據(jù)青蛙的睡蓮花重新排序,其設(shè)置為正整數(shù)值或負(fù)整數(shù)值 （-2， -1， 0， 1， 2）
flexbox盒中的紅色盒子設(shè)置屬性order:-3，則變?yōu)椋?br>
5. align-self屬性
跟父級(jí)盒子中align-items做區(qū)分，align-self是設(shè)置子項(xiàng)目不同于父級(jí)盒子的垂直布局
原青蛙布局如下圖，隨后將flexbox盒中的黃色盒子樣式為：order:1;align-self:flex-end; 就可以讓青蛙與盒子對(duì)應(yīng)的顏色一致。
6. flex-wrap 屬性
nowrap（每項(xiàng)目都在一條線）、wrap（項(xiàng)目分行）、wrap-reverse（項(xiàng)目反向分行）。
7. flex-flow屬性
flex-direction、flex-wrap這兩個(gè)屬性經(jīng)常一起使用，因此創(chuàng)建了速記屬性flex-flow來(lái)組合它們。此速記屬性接受用空格分隔的兩個(gè)屬性的值。如：flex-flow:column wrap
8. align-content屬性
用來(lái)設(shè)置多行之間的間距。此屬性采用以下值：flex-start（垂直方向靠頂）、flex-end（垂直方向靠底）、center（垂直方向居中）、space-between（各項(xiàng)目垂直間距相等，靠邊）、space-around（各項(xiàng)目垂直間距相等）、stretch（拉伸線條以適合容器）
三、綜合練習(xí)
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-414072.html
代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-414072.html
justify-content:center;
align-content:space-between;
flex-flow:column-reverse wrap-reverse;
到了這里，關(guān)于flex彈性布局詳細(xì)介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
