flex布局 · PHP学习

# flex布局 <http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html> <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/3a/12/3a1222a4a56a55d5dbb08f451217b780_737x276.png) ![](https://img.kancloud.cn/ca/f5/caf5cd87049ba01510c7cf66b53eab4c_989x579.png) > 容器默认存在两根轴：水平的**主轴**（main axis）和垂直的**交叉轴**（cross axis）。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。项目默认沿主轴排列。单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。交叉轴根据主轴的方向分向下↓的交叉轴与向右→的交叉轴 ``` <pre class="calibre10">``` .container{ display: flex;/*行内元素为：online-flex*/ /*Webkit 内核的浏览器，必须加上`-webkit`前缀*/ display: -webkit-flex; /* Safari */ } ``` ``` > **注意**.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 ``` <pre class="calibre10">``` .container{ flex-direction: row(默认) | row-reverse | column | column-reverse; } ``` ``` ![](https://img.kancloud.cn/1a/c9/1ac986a5f71ebc86dc02763cf88e676f_790x197.png) - **flex-wrap** 一条轴线排不下，如何换行 ``` <pre class="calibre10">``` .container{ flex-wrap: nowrap(默认) | wrap | wrap-reverse } ``` ``` （1）`nowrap`（默认）：不换行。 ![](https://img.kancloud.cn/58/f9/58f92bcdae0bb074d61aba89cbb9752a_698x142.png) （2）`wrap`：换行，第一行在上方。 ![](https://img.kancloud.cn/5d/9d/5d9dc55e59829c5c870fc829b56f3c74_699x181.png) （3）`wrap-reverse`：换行，第一行在下方。 ![](https://img.kancloud.cn/07/5a/075a319f9bece9b1b88c2046b6de9e2f_695x171.png) - **flex-flow** 是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap` flex-flow: <flex-direction> || <flex-wrap>; ``` <pre class="calibre10">``` .container{ flex-flow: row nowrap; } ``` ``` - **justify-content** 项目item在主轴上的对齐方式从上可知 flex-direction属性的row 与row-reverse决定主轴的方向 - `flex-start`（默认值）：主轴起始方向对齐 - `flex-end`：主轴结束方向对齐 - `center`：居中 - `space-between`：两端对齐，项目之间的间隔都相等。 - `space-around`：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 ``` <pre class="calibre10">``` display: flex; flex-flow:row nowrap; justify-content:flex-start; ``` ``` ![](https://img.kancloud.cn/8e/1f/8e1f680c543c26799e89b2a527207fde_1015x111.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row nowrap; justify-content:flex-end; ``` ``` ![](https://img.kancloud.cn/76/12/76121bb4278b7dde4b00ef967c299af2_1020x112.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row-reverse nowrap; justify-content:flex-start; ``` ``` ![](https://img.kancloud.cn/08/6f/086fc97b3ca18d0635b15af74f299bcb_1012x113.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row-reverse nowrap; justify-content:flex-end; ``` ``` ![](https://img.kancloud.cn/8a/4f/8a4f53ed057ed38558a44165bd13b9a3_1011x113.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row nowrap; justify-content:center; ``` ``` ![](https://img.kancloud.cn/c2/bd/c2bd85992383c9d654cfa0818ab9432e_1015x111.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row-reverse nowrap; justify-content:center; ``` ``` ![](https://img.kancloud.cn/8f/a9/8fa966411aba38ab3c5164d1fb84e116_1016x113.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row nowrap; justify-content:space-between; ``` ``` ![](https://img.kancloud.cn/06/a8/06a82362fbd9351dd530632e2a6010e4_1015x114.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row-reverse nowrap; justify-content:space-between; ``` ``` ![](https://img.kancloud.cn/fc/f7/fcf7d13fa81b97f49d7db473f6462783_1018x109.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row nowrap; justify-content:space-around; ``` ``` ![](https://img.kancloud.cn/60/ae/60ae638251d53784d3c2376bd7139456_1015x115.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row-reverse nowrap; justify-content:space-around; ``` ``` ![](https://img.kancloud.cn/71/25/712515066463fda081c3ebb90c587428_1024x113.png) - **align-items** 定义项目在交叉轴上如何对齐。 - `flex-start`：交叉轴的起点对齐。 - `flex-end`：交叉轴的终点对齐。 - `center`：交叉轴的中点对齐。 - `baseline`: 项目的第一行文字的基线对齐。 - `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 flex-start：交叉轴的起点对齐 ``` <pre class="calibre10">``` display: flex; flex-flow:row nowrap;/*默认主轴方向→*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: flex-start;/*item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/cf/70/cf70c7056134750bcb238c362edc4f8a_1001x100.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row-reverse nowrap;/*主轴方向←*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: flex-start;/*item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/2a/3a/2a3a99ace81436973d7678e7287042c0_1019x111.png) ``` <pre class="calibre10">``` display: flex; flex-flow:column-reverse nowrap;/*主轴方向↑*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: flex-start;/*item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/af/b5/afb5bb7856ef032be3bfa3cc02eb1854_1007x202.png) ``` <pre class="calibre10">``` display: flex; flex-flow:column nowrap;/*主轴方向↓*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: flex-start;/*item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/a4/94/a49405694d6e695ed4a2eea86155cb03_1021x210.png) flex-end：交叉轴的终点对齐 ``` <pre class="calibre10">``` display: flex; flex-flow:row nowrap;/*默认主轴方向→*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: flex-end;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/fa/10/fa109d0d4d31a46b312768485ff047d0_1017x113.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row-reverse nowrap;/* 主轴方向←*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: flex-end;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/21/7b/217b741053c7b8b5f52c9ffa1aae6581_1015x210.png) ``` <pre class="calibre10">``` display: flex; flex-flow:column nowrap;/* 主轴方向←*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: flex-end;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/b8/19/b8199579551241f1412d329975ab1fb5_1044x216.png) ``` <pre class="calibre10">``` display: flex; flex-flow:column-reverse nowrap;/* 主轴方向↑*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: flex-end;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/1a/50/1a50e0958f05be688231405b7bd35406_1016x213.png) center：交叉轴的中点对齐 ``` <pre class="calibre10">``` display: flex; flex-flow:row nowrap;/*默认主轴方向→*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: center;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/d8/d7/d8d76b97ecdeedb70495e1e3312ffa9b_1024x110.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row-reverse nowrap;/* 主轴方向←*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: center;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/bd/85/bd85d96fd0813f354a731a999ffd16bb_1010x213.png) ``` <pre class="calibre10">``` display: flex; flex-flow:column nowrap;/* 主轴方向↓*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: center;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/8a/21/8a213f36da70900e42e2460e51907ed4_1016x214.png) ``` <pre class="calibre10">``` display: flex; flex-flow:column-reverse nowrap;/* 主轴方向↑*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: center;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/a2/19/a21923b576cca6c7c5c3767ca3273af5_1018x215.png) 允许换行时center居中，换行后存在间隙，我们使用align-content: center;替换align-items: center; ``` <pre class="calibre10">``` display: flex; flex-flow:row wrap;/* 主轴方向→*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: center;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/63/67/63674d29ab4063685b13fcc4b78352b0_1016x214.png) baseline：项目的第一行文字的基线对齐 ``` <pre class="calibre10">``` display: flex; flex-flow:row nowrap;/*默认主轴方向→*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: baseline;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/eb/3d/eb3dc7340c5b45206f1c36fcd7605644_1016x113.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row-reverse nowrap;/* 主轴方向←*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: baseline;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/f9/88/f9883ebfe7f16822e058844641df46f5_1012x218.png) ``` <pre class="calibre10">``` display: flex; flex-flow:column nowrap;/* 主轴方向↓*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: baseline;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/8f/f8/8ff83e1eb7c60e755709dc616b660540_1025x209.png) ``` <pre class="calibre10">``` display: flex; flex-flow:column-reverse nowrap;/* 主轴方向↑*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: baseline;/* item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/02/fc/02fc7103a88bb37deb44432ce67719c2_1018x210.png) stretch：如果项目item未设置高度或设为auto，将占满整个容器的高度 ``` <pre class="calibre10">``` display: flex; flex-flow:row nowrap;/*默认主轴方向→*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: stretch;/*默认 item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/cd/6a/cd6a8de7cdf4c08e3b8daf84af3af19d_1033x117.png) ``` <pre class="calibre10">``` display: flex; flex-flow:row-reverse nowrap;/* 主轴方向←*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-items: stretch;/*默认 item在交叉轴的对齐方式 */ ``` ``` ![](https://img.kancloud.cn/df/00/df0092798505530922b0ebd4e862b483_1016x214.png) - **align-content** 用法与align-items一致，定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。即项目只有一行时无效果 - `flex-start`：与交叉轴的起点对齐。 - `flex-end`：与交叉轴的终点对齐。 - `center`：与交叉轴的中点对齐。 - `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。 - `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 - `stretch`（默认值）：轴线占满整个交叉轴。只有一根轴线时 ``` <pre class="calibre10">``` display: flex; flex-flow:row nowrap;/*默认主轴方向→*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-content: center; ``` ``` 如下图所示没有生效 ![](https://img.kancloud.cn/05/61/0561f253a81b4e40ff64802ebc69f2b7_1012x210.png) 修改代码初始效果如下当允许换行时项目就有两行即两根轴线align-content: center;生效 ``` <pre class="calibre10">``` display: flex; flex-flow:row wrap;/* 主轴方向→*/ justify-content:flex-start;/*默认 item在主轴的对齐方式*/ align-content: center; ``` ``` ![](https://img.kancloud.cn/08/f3/08f3865c45af7b085e7452107c9e8d6a_1013x211.png) html代码参考， ``` <pre class="calibre10">``` <!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 ``` <pre class="calibre10">``` <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/f6/ef/f6ef86e7a12feb9912bd414bb5a8263f_1021x211.png) 添加order ``` <pre class="calibre10">``` <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/2e/1b/2e1b1bec9ea53166eea5e7ceb8f9e1c1_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的空余空间 ``` <pre class="calibre10">``` <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/40/1e/401e52edb90d39e89c346b13eb85f467_509x114.png) 如果A索取剩余空间:设置item1类元素flex-grow为1，B、C不索取。则最终A的大小为自身宽度（100px）+ 剩余空间的宽度（100px）= 200px ![](https://img.kancloud.cn/66/2f/662f386fbf7dbdc3b953cb7dcf16e138_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/31/e7/31e71d78abe4df6074ae0a53a7cff30b_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, ``` <pre class="calibre10">``` <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/20/cd/20cdb3b54437b952fffd5f5b7ca00889_517x106.png) **flex-shrink**属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。 `flex-shrink`的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小 ``` <pre class="calibre10">``` <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/7f/88/7f88a39cfb5c17e009d166d874052bcf_334x113.png) ``` <pre class="calibre10">``` <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/f5/7d/f57d05ff9c7e570b05dc234e2ead5ef7_223x108.png) **flex-basis**属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小它可以设为跟`width`或`height`属性一样的值（比如350px），则项目将占据固定空间其实，width也可以设置item宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。如图 flex-basis替换掉了item2的width ``` <pre class="calibre10">``` <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/eb/a7/eba75c3e113dcc864dbcec7bbb3bd92c_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`。 ``` <pre class="calibre10">``` <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/1a/8c/1a8c7a220cb840a9d0640c637533be18_1013x108.png)