flex布局 · 5+App 基于HTML JS CSS編寫的運行于手機端的App（DCloud開發）

[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) [https://blog.csdn.net/m0\_37058714/article/details/80765562](https://blog.csdn.net/m0_37058714/article/details/80765562) **瀏覽器四大內核** 四大內核分別是：Trident（也稱IE內核）、webkit、Blink、Gecko * **Firefox** (Gecko內核，俗稱Firefox內核) * **Chrome谷歌瀏覽器**(統稱為Chromium內核或Chrome內核，以前是Webkit內核，現在是Blink內核) * **Safari瀏覽器** (Webkit內核) * **Opera瀏覽器**(最初是自己的Presto內核，后來是Webkit，現在是Blink內核) * **搜狗、QQ瀏覽器、阿里云**（IE兼容模式+Webkit高速模式） * **360極速、獵豹瀏覽器**（IE+Chrome雙內核） * **2345瀏覽器、百度、世界之窗、遨游（3.x為雙內核）**（以前是IE內核，現在也是IE+Chrome雙內核） ### **flex兼容性** ![](https://img.kancloud.cn/6a/bb/6abb333403f0de8732a6350c51376a9a_737x276.png) ![](https://img.kancloud.cn/06/5f/065fa1d95d0a765065ea40701dfb1ff6_989x579.png) >容器默認存在兩根軸：水平的**主軸**（main axis）和垂直的**交叉軸**（cross axis）。主軸的開始位置（與邊框的交叉點）叫做`main start`，結束位置叫做`main end`；交叉軸的開始位置叫做`cross start`，結束位置叫做`cross end`。項目默認沿主軸排列。單個項目占據的主軸空間叫做`main size`，占據的交叉軸空間叫做`cross size`。交叉軸根據主軸的方向分向下↓的交叉軸與向右→的交叉軸 ~~~ .container{ display: flex;/*行內元素為：online-flex*/ /*Webkit 內核的瀏覽器，必須加上`-webkit`前綴*/ display: -webkit-flex; /* Safari */ } ~~~ >[danger]**注意**.container設為 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`屬性將失效 ## container容器的屬性 * **flex-direction** 屬性決定項目item**主軸的方向**（決定它的子元素按照什么方向來排列，**即項目item的排列方向**） row：默認，主軸方向為→ row-reverse：主軸方向為← column：主軸方向為↓ column-reverse：主軸方向為↑ 如果flex-direction是row或者row-reverse，那么主軸就是justify-contain 如果flex-direction是column或者column-reverse,那么主軸就是align-items ~~~ .container{ flex-direction: row(默認) | row-reverse | column | column-reverse; } ~~~ ![](https://img.kancloud.cn/6f/be/6fbe5acfac9bdc8583c6f0db80c85ce3_790x197.png) * **flex-wrap** 一條軸線排不下，如何換行 ~~~ .container{ flex-wrap: nowrap(默認) | wrap | wrap-reverse } ~~~ （1）`nowrap`（默認）：不換行。 ![](https://img.kancloud.cn/5e/2e/5e2e102bbfb5144a79728860708c47ab_698x142.png) （2）`wrap`：換行，第一行在上方。 ![](https://img.kancloud.cn/e6/72/e672a04a9370c4f05bde3e0fbee7b152_699x181.png) （3）`wrap-reverse`：換行，第一行在下方。 ![](https://img.kancloud.cn/14/68/1468c02618b9f1b8b8be7019c46d52b6_695x171.png) * **flex-flow** 是`flex-direction`屬性和`flex-wrap`屬性的簡寫形式，默認值為`row nowrap` flex-flow: \<flex-direction\> || \<flex-wrap\>; ~~~ .container{ flex-flow: row nowrap; } ~~~ * **justify-content** 項目item在主軸上的對齊方式從上可知 flex-direction屬性的row 與row-reverse決定主軸的方向 * `flex-start`（默認值）：主軸起始方向對齊 * `flex-end`：主軸結束方向對齊 * `center`：居中 * `space-between`：兩端對齊，項目之間的間隔都相等。 * `space-around`：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。 ``` display: flex; flex-flow:row nowrap; justify-content:flex-start; ``` ![](https://img.kancloud.cn/36/d5/36d5222dc60272e429bb0a4ffbe8c6f9_1015x111.png) ``` display: flex; flex-flow:row nowrap; justify-content:flex-end; ``` ![](https://img.kancloud.cn/5d/e0/5de037f1836163dfd17d6b3e597408b5_1020x112.png) ``` display: flex; flex-flow:row-reverse nowrap; justify-content:flex-start; ``` ![](https://img.kancloud.cn/d2/85/d2859afaa93a9ff546cfd918e5437002_1012x113.png) ``` display: flex; flex-flow:row-reverse nowrap; justify-content:flex-end; ``` ![](https://img.kancloud.cn/1d/af/1daf4984355173f46bae6127485af2a7_1011x113.png) ``` display: flex; flex-flow:row nowrap; justify-content:center; ``` ![](https://img.kancloud.cn/71/e2/71e28fe010c7f49f121a70b8b44d69bc_1015x111.png) ``` display: flex; flex-flow:row-reverse nowrap; justify-content:center; ``` ![](https://img.kancloud.cn/e5/33/e5334df5dd4776885d95ba5ea65f894d_1016x113.png) ``` display: flex; flex-flow:row nowrap; justify-content:space-between; ``` ![](https://img.kancloud.cn/1e/bc/1ebc189e08e40407c0322028cc61a5bc_1015x114.png) ``` display: flex; flex-flow:row-reverse nowrap; justify-content:space-between; ``` ![](https://img.kancloud.cn/71/a4/71a4de4af8465f92243daa5071d0e7bd_1018x109.png) ``` display: flex; flex-flow:row nowrap; justify-content:space-around; ``` ![](https://img.kancloud.cn/9b/2b/9b2b53bb82f5ef5a46f69b9886015c84_1015x115.png) ``` display: flex; flex-flow:row-reverse nowrap; justify-content:space-around; ``` ![](https://img.kancloud.cn/34/d4/34d44913d4f97ae0f7ee23ab2ff71353_1024x113.png) * **align-items** 定義項目在交叉軸上如何對齊。 * `flex-start`：交叉軸的起點對齊。 * `flex-end`：交叉軸的終點對齊。 * `center`：交叉軸的中點對齊。 * `baseline`: 項目的第一行文字的基線對齊。 * `stretch`（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。 flex-start：交叉軸的起點對齊 ``` display: flex; flex-flow:row nowrap;/*默認主軸方向→*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: flex-start;/*item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/b7/b3/b7b3aa8cfa1530046c14c5429ca82730_1001x100.png) ``` display: flex; flex-flow:row-reverse nowrap;/*主軸方向←*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: flex-start;/*item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/af/b1/afb1d602e2a67f3c021f5a2102d050a3_1019x111.png) ``` display: flex; flex-flow:column-reverse nowrap;/*主軸方向↑*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: flex-start;/*item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/9e/a3/9ea37093bfae2ad4d5820ef9fe4787d9_1007x202.png) ``` display: flex; flex-flow:column nowrap;/*主軸方向↓*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: flex-start;/*item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/66/de/66de0dd4db0aef8ae1e1ae855a9bc997_1021x210.png) flex-end：交叉軸的終點對齊 ``` display: flex; flex-flow:row nowrap;/*默認主軸方向→*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: flex-end;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/ad/a5/ada5c81ecececd1c3d7a22a1ade8f8fc_1017x113.png) ``` display: flex; flex-flow:row-reverse nowrap;/* 主軸方向←*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: flex-end;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/19/0f/190f9e721de6b4a28283da0ca1a01813_1015x210.png) ``` display: flex; flex-flow:column nowrap;/* 主軸方向←*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: flex-end;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/9a/83/9a83908d72775521acf90679dd5a50e1_1044x216.png) ``` display: flex; flex-flow:column-reverse nowrap;/* 主軸方向↑*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: flex-end;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/2a/50/2a507c9576ce01e7c77dcf73b0b7dcff_1016x213.png) center：交叉軸的中點對齊 ``` display: flex; flex-flow:row nowrap;/*默認主軸方向→*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: center;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/17/e7/17e74fbf7843329a96f71263fcbbf568_1024x110.png) ``` display: flex; flex-flow:row-reverse nowrap;/* 主軸方向←*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: center;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/2a/90/2a904cf0f980b30ff83b095f6b72b5c1_1010x213.png) ``` display: flex; flex-flow:column nowrap;/* 主軸方向↓*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: center;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/bb/56/bb5624b5d130fec0474ea0cb7cd33f9d_1016x214.png) ``` display: flex; flex-flow:column-reverse nowrap;/* 主軸方向↑*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: center;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/d0/7b/d07bf5288514625ac8672120074d5d7c_1018x215.png) 允許換行時center居中，換行后存在間隙，我們使用align-content: center;替換align-items: center; ``` display: flex; flex-flow:row wrap;/* 主軸方向→*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: center;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/9e/c0/9ec03c3dca83c65730a89ffdd4f189f2_1016x214.png) baseline：項目的第一行文字的基線對齊 ``` display: flex; flex-flow:row nowrap;/*默認主軸方向→*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: baseline;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/32/70/3270cf162579f1faaf62aaebe81c4704_1016x113.png) ``` display: flex; flex-flow:row-reverse nowrap;/* 主軸方向←*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: baseline;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/a0/78/a078f29dc5cc420b2faa4734d0dee3df_1012x218.png) ``` display: flex; flex-flow:column nowrap;/* 主軸方向↓*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: baseline;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/58/0e/580e139ff1a1f1fbabad193fbf087caf_1025x209.png) ``` display: flex; flex-flow:column-reverse nowrap;/* 主軸方向↑*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: baseline;/* item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/78/b1/78b10b00dd9eb28589bb82384e8e8549_1018x210.png) stretch：如果項目item未設置高度或設為auto，將占滿整個容器的高度 ``` display: flex; flex-flow:row nowrap;/*默認主軸方向→*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: stretch;/*默認 item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/f4/40/f44043d0a6a6c9d5c40c948439c8d425_1033x117.png) ``` display: flex; flex-flow:row-reverse nowrap;/* 主軸方向←*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-items: stretch;/*默認 item在交叉軸的對齊方式 */ ``` ![](https://img.kancloud.cn/fb/da/fbda72bb303f281700e3b3e2c7bee1a8_1016x214.png) * **align-content** 用法與align-items一致，定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。即項目只有一行時無效果 * `flex-start`：與交叉軸的起點對齊。 * `flex-end`：與交叉軸的終點對齊。 * `center`：與交叉軸的中點對齊。 * `space-between`：與交叉軸兩端對齊，軸線之間的間隔平均分布。 * `space-around`：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 * `stretch`（默認值）：軸線占滿整個交叉軸。只有一根軸線時 ``` display: flex; flex-flow:row nowrap;/*默認主軸方向→*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-content: center; ``` 如下圖所示沒有生效 ![](https://img.kancloud.cn/8a/cc/8accda89e92d5e131fddf6ac7882fd57_1012x210.png) 修改代碼初始效果如下當允許換行時項目就有兩行即兩根軸線align-content: center;生效 ``` display: flex; flex-flow:row wrap;/* 主軸方向→*/ justify-content:flex-start;/*默認 item在主軸的對齊方式*/ align-content: center; ``` ![](https://img.kancloud.cn/06/09/0609f0cc4bd32a25aaaf735d63f9ccfe_1013x211.png) html代碼參考， ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <style type="text/css"> .container>div{ width: 200px; height: 50px; } .container>.item-1{ background-color: #09BB07; } .container>.item-2{ background-color: #333333; } .container>.item-3{ background-color: #E80080; } .container>.item-4{ background-color: #F76260; } .container>.item-5{ background-color: #FFB400; } .container>.item-6{ background-color: #8A6DE9; } h1{ margin: 0; } .container{ width: 1000px; height: 200px; text-align: center; background-color: #007AFF; display:-webkit-flex; display: flex; flex-flow:row-reverse nowrap;/*主軸方向包括 row row-reverse column column-reverse*/ justify-content:flex-start;/*item在主軸的對齊方式 flex-start | flex-end | center | space-between | space-around;*/ align-items: stretch;/*item在交叉軸的對齊方式 flex-start | flex-end | center | baseline | stretch*/ } .container{ width: 1000px; height: 200px; text-align: center; background-color: #007AFF; display:-webkit-flex; display: flex; flex-flow:row wrap;/*主軸方向包括 row row-reverse column column-reverse*/ justify-content:flex-start;/*item在主軸的對齊方式 flex-start | flex-end | center | space-between | space-around;*/ align-content: center;/*flex-start | flex-end | center | space-between | space-around | stretch*/ } </style> </head> <body> <div class="container"> <div class="item-1"><h1>1</h1></div> <div class="item-2"><h1>2</h1></div> <div class="item-3" style="font-size: 20px;"><h1>3</h1></div> </div> <hr> <div class="container"> <div class="item-1" style="height: 80px;font-size: 36px;">我愛你</div> <div class="item-2" style="height: 40px">塞北的雪</div> <div class="item-3" style="font-size: 25px;">我亦是行人</div> </div> <hr> <div class="container"> <div class="item-1" style="height:auto;">item沒設置高度</div> <div class="item-2" style="height:auto;">或者設置item高度為auto</div> <div class="item-3" style="height:auto;">則stretch時item高度填滿容器</div> </div> <hr> <div class="container"> <div class="item-1"><h1>1</h1></div> <div class="item-2"><h1>2</h1></div> <div class="item-3" style="font-size: 20px;"><h1>3</h1></div> <div class="item-4"><h1>4</h1></div> <div class="item-5"><h1>5</h1></div> <div class="item-6"><h1>6</h1></div> </div> </body> </html> ``` ## **項目item的屬性** * **order** 定義項目的排列順序。數值越小，排列越靠前，默認為0 * **flex-grow** 定義項目的放大比例，默認為`0`，即如果存在剩余空間，也不放大 * **flex-shrink** * **flex-basis** * **flex** * **align-self** **order**：定義項目的排列順序。數值越小，排列越靠前，默認為0 ``` <style type="text/css"> .container1>div{ width: 200px; } .container1{ display:-webkit-flex; display: flex; flex-flow:row nowrap;/*主軸方向包括 row row-reverse column column-reverse*/ justify-content:flex-start;/*item在主軸的對齊方式 flex-start | flex-end | center | space-between | space-around;*/ align-content: flex-start;/*flex-start | flex-end | center | baseline | stretch*/ } </style> <div class="container1" style="width: 1000px;height: 200px;text-align: center;background-color: #007AFF;"> <div class="item1" style="background-color: #09BB07;height: 50px;"><h1>1</h1></div> <div class="item2" style="background-color: #333333;height: 30px;"><h1>2</h1></div> <div class="item3" style="background-color: #E80080;height: 25px;"><h1>3</h1></div> <div class="item4" style="background-color: #F76260;height: 10px;"><h1>4</h1></div> <div class="item5" style="background-color: #FFB400;height: 40px;"><h1>5</h1></div> <div class="item6" style="background-color: #8A6DE9;height: 45px;"><h1>6</h1></div> </div> ``` ![](https://img.kancloud.cn/f5/5d/f55deff3f34b5721e8c8026fdc193dfa_1021x211.png) 添加order ``` <style type="text/css"> .container1>div{ width: 200px; } .container1{ display:-webkit-flex; display: flex; flex-flow:row nowrap;/*主軸方向包括 row row-reverse column column-reverse*/ justify-content:flex-start;/*item在主軸的對齊方式 flex-start | flex-end | center | space-between | space-around;*/ align-content: flex-start;/*flex-start | flex-end | center | baseline | stretch*/ } </style> <div class="container1" style="width: 1000px;height: 200px;text-align: center;background-color: #007AFF;"> <div class="item1" style="order:3;background-color: #09BB07;height: 50px;"><h1>1</h1></div> <div class="item2" style="order:2;background-color: #333333;height: 30px;"><h1>2</h1></div> <div class="item3" style="order:1;background-color: #E80080;height: 25px;"><h1>3</h1></div> <div class="item4" style="order:4;background-color: #F76260;height: 10px;"><h1>4</h1></div> <div class="item5" style="order:6;background-color: #FFB400;height: 40px;"><h1>5</h1></div> <div class="item6" style="order:5;background-color: #8A6DE9;height: 45px;"><h1>6</h1></div> </div> ``` ![](https://img.kancloud.cn/89/52/8952610ee271abac7de9aacad54d0298_1031x79.png) **flex-grow**：屬性定義項目的放大比例，默認為`0`（父元素的寬度存在剩余寬度，也不放大），當父元素的寬度大于所有子元素的寬度的和時（即父元素會有剩余空間），子元素如何分配父元素的剩余空間。?flex-grow的默認值為0，意思是該元素不索取父元素的剩余空間，如果值大于0，表示索取。值越大，索取的越厲害。 ?**舉個例子**: 父元素寬500px，有兩個子元素：A、B和C。A寬為100px，B寬為200px，C寬為100px。則空余空間為 500-（100+200+100）= 100px。如果A，B都不索取剩余空間，則有100px的空余空間 ``` <style type="text/css"> .container1{ display:-webkit-flex; display: flex; flex-flow:row nowrap;/*主軸方向包括 row row-reverse column column-reverse*/ } </style> <div class="container1" style="width: 500px;height: 100px;text-align: center;background-color: #007AFF;"> <div class="item1" style="flex-grow:0;order:1;background-color: #E80080;width: 100px;height: 25px;"><h1>A</h1></div> <div class="item2" style="flex-grow:0;order:6;background-color: #FFB400;width: 200px;height: 40px;"><h1>B</h1></div> <div class="item3" style="flex-grow:0;order:5;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>C</h1></div> </div> ``` ![](https://img.kancloud.cn/8a/8c/8a8cc938a6e224b7591b088fc50df702_509x114.png) 如果A索取剩余空間:設置item1類元素flex-grow為1，B、C不索取。則最終A的大小為自身寬度（100px）+ 剩余空間的寬度（100px）= 200px ![](https://img.kancloud.cn/1f/0f/1f0f419622bdfa06e3fbba84a37babd6_516x104.png) 如果A，B都設索取剩余空間，C不索取，A設置flex-grow為1，B設置flex-grow為2。則最終A的大小為自身寬度（100px）+ A獲得的剩余空間的寬度（100px?(1/(1+2))）=133.33...,最終B的大小為自身寬度（200px）+ B獲得的剩余空間的寬度（200px?(2/(1+2))）=266.66... ![](https://img.kancloud.cn/aa/ba/aabad78301c45eef21312f1440b57b9d_516x112.png) 如果A，B、C都設索取剩余空間，A設置flex-grow為1，B設置flex-grow為2,B設置flex-grow為2。則最終A的大小為自身寬度（100px）+ A獲得的剩余空間的寬度（100px?(1/(1+2+2))）=120，最終B的大小為自身寬度（200px）+ B獲得剩余寬度為（100px?(2/(1+2+2))）=240, 最終C的大小為自身寬度（100px）+ C獲得剩余寬度為（100px?(2/(1+2+2))）=140, ``` <style type="text/css"> .container1{ display:-webkit-flex; display: flex; flex-flow:row nowrap;/*主軸方向包括 row row-reverse column column-reverse*/ } </style> <div class="container1" style="width: 500px;height: 100px;text-align: center;background-color: #007AFF;"> <div class="item1" style="flex-grow:1;order:1;background-color: #E80080;width: 100px;height: 25px;"><h1>A</h1></div> <div class="item2" style="flex-grow:2;order:6;background-color: #FFB400;width: 200px;height: 40px;"><h1>B</h1></div> <div class="item3" style="flex-grow:2;order:5;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>C</h1></div> </div> ``` ![](https://img.kancloud.cn/48/be/48be32da87626bcdf5406e418b988b2e_517x106.png) **flex-shrink**屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。當父元素的寬度小于所有子元素的寬度的和時（即子元素會超出父元素），子元素如何縮小自己的寬度的。?`flex-shrink`的默認值為1，當父元素的寬度小于所有子元素的寬度的和時，子元素的寬度會減小。值越大，減小的越厲害。如果值為0，表示不減小 ``` <style type="text/css"> .container1{ display:-webkit-flex; display: flex; flex-flow:row nowrap;/*主軸方向包括 row row-reverse column column-reverse*/ } </style> <div class="container1" style="width: 200px;height: 100px;text-align: center;background-color: #007AFF;"> <div class="item1" style="flex-shrink:0;background-color: #E80080;width: 100px;height: 25px;"><h1>A</h1></div> <div class="item2" style="flex-shrink:0;background-color: #FFB400;width: 100px;height: 40px;"><h1>B</h1></div> <div class="item3" style="flex-shrink:0;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>C</h1></div> </div> ``` ![](https://img.kancloud.cn/9d/1a/9d1a1cb85e33d1fff97845a9a9b925d2_334x113.png) ``` <style type="text/css"> .container1{ display:-webkit-flex; display: flex; flex-flow:row nowrap;/*主軸方向包括 row row-reverse column column-reverse*/ } </style> <div class="container1" style="width: 200px;height: 100px;text-align: center;background-color: #007AFF;"> <div class="item1" style="flex-shrink:2;background-color: #E80080;width: 100px;height: 25px;"><h1>A</h1></div> <div class="item2" style="flex-shrink:0;background-color: #FFB400;width: 100px;height: 40px;"><h1>B</h1></div> <div class="item3" style="flex-shrink:1;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>C</h1></div> </div> ``` ![](https://img.kancloud.cn/f2/d2/f2d217576def8309fed6fb1251458870_223x108.png) **flex-basis**屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為`auto`，即項目的本來大小它可以設為跟`width`或`height`屬性一樣的值（比如350px），則項目將占據固定空間其實，width也可以設置item寬度。如果元素上同時設置了width和flex-basis，那么width 的值就會被flex-basis覆蓋掉。如圖 flex-basis替換掉了item2的width ``` <style type="text/css"> .container1{ display:-webkit-flex; display: flex; flex-flow:row nowrap;/*主軸方向包括 row row-reverse column column-reverse*/ } </style> <div class="container1" style="width: 200px;height: 100px;text-align: center;background-color: #007AFF;"> <div class="item1" style="flex-shrink:0;background-color: #E80080;width: 100px;height: 25px;"><h1>A</h1></div> <div class="item2" style="flex-shrink:0;flex-basis:200px;background-color: #FFB400;width: 100px;height: 40px;"><h1>B</h1></div> <div class="item3" style="flex-shrink:0;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>C</h1></div> </div> ``` ![](https://img.kancloud.cn/ba/c1/bac141a32ba0eb0325aada2d5af88196_432x113.png) ### **flex屬性** `flex`屬性是`flex-grow`,`flex-shrink`和`flex-basis`的簡寫，默認值為`0 1 auto`。后兩個屬性可選。該屬性有兩個快捷值：`auto`(`1 1 auto`) 和 none (`0 0 auto`)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。 ### **align-self屬性** `align-self`屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋容器container的`align-items`屬性。默認值為`auto`，表示繼承父元素的`align-items`屬性，如果沒有父元素，則等同于`stretch`。 ``` <style type="text/css"> .container1{ display:-webkit-flex; display: flex; flex-flow:row nowrap;/*主軸方向包括 row row-reverse column column-reverse*/ } </style> <div class="container1" style="width: 1000px;height: 100px;text-align: center;background-color: #007AFF;"> <div class="item1" style="align-self: auto;background-color: #E80080;width: 100px;height: 45px;"><h1>1</h1></div> <div class="item2" style="align-self: flex-start;background-color: #FFB400;width: 100px;height: 45px;"><h1>2</h1></div> <div class="item3" style="align-self: flex-end;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>3</h1></div> <div class="item3" style="align-self: center;background-color: #09BB07;width: 100px;height: 45px;"><h1>4</h1></div> <div class="item3" style="align-self: baseline;background-color: #333333;width: 100px;height: 45px;"><h1>5</h1></div> <div class="item3" style="align-self: stretch;background-color: #F76260;width: 100px;height: 45px;"><h1>6</h1></div> </div> ``` ![](https://img.kancloud.cn/ed/7f/ed7f78512c41de13062c69d4f3628e4f_1013x108.png)