flex布局 ﹏ヽ暗。殇╰゛Y 2024-03-29 14:26 2阅读 0赞 ## 一、什么是flex布局 ## flex是flexible box的缩写，意为弹性布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。 ### 1、基本概念 ### #### 容器 #### 采用flex布局的元素，称为flex容器（flex container），简称容器。 #### 项目 #### 容器的所有子元素自动成为容器成员，称为flex项目（flex-item），简称项目。 #### 轴 #### 容器默认存在两根轴，分别为主轴（main axis）和交叉轴（cross axis）。 主轴 主轴默认是水平的，主轴的开始位置叫main start，结束位置叫main end。 项目沿主轴的方向排列 单个项目占据的主轴空间叫做main size。 交叉轴 交叉轴默认是垂直的，交叉轴的开始位置叫cross start，结束位置叫cross end。 单个项目占据的交叉轴空间叫做cross size ![f7972aa915db4782b0d19c1d646cfb38.png][] ### 2、为什么使用flex布局 ### 弹性布局，垂直居中容易实现 ## 二、如何使用flex布局 ## 示例：一个大div里放三个小div的代码和样式如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</title> <style> #main { border: 1px solid black;height: 400px;width: 400px; } #main div { border: 1px solid green;width: 80px;height: 80px;background-color: rgba(73,163,62,0.91); } #main span { font-weight: bold; font-size: 45px; } </style> </head> <body> <div id="main"> <div><span>A</span></div> <div><span>B</span></div> <div><span>C</span></div> </div> </body> </html> ![9782d99af62a43c2bb5d10741a5e9be3.png][] 通过**将元素的display属性设置为flex**（块级flex容器）或inline-flex（行内块级flex容器）。当一个元素设置了flex布局后，子元素的float、clear和vertical-align等属性将失效。 #main { display: flex; } ### 1、容器属性 ### #### ①flex-direction #### **指定容器的主轴方向**（即项目的排列方向），该属性的可选值如下： <table style="width:680px;"> <tbody> <tr> <td style="background-color:#0066cc;text-align:center;width:119px;"><span style="color:#f3f3f4;">属性值</span></td> <td style="background-color:#0066cc;text-align:center;width:131px;"><span style="color:#f3f3f4;">描述</span></td> <td style="background-color:#0066cc;text-align:center;width:235px;"><span style="color:#f3f3f4;">代码</span></td> <td style="background-color:#0066cc;text-align:center;width:306px;"><span style="color:#f3f3f4;">效果</span></td> </tr> <tr> <td style="text-align:center;width:119px;">row</td> <td style="text-align:center;vertical-align:middle;width:131px;"> <p>默认值，主轴沿水平方向从左到右</p> </td> <td style="text-align:center;vertical-align:middle;width:235px;"> <p>不写或者：</p> <pre><code>#main { display: flex; flex-direction: row; }</code></pre> <p></p> </td> <td style="text-align:center;width:306px;"><img alt="" height="839" src="https://img-blog.csdnimg.cn/dd0c8cee77e0447f83936f96579fb858.png" width="868"></td> </tr> <tr> <td style="text-align:center;width:119px;">row-reverse</td> <td style="text-align:center;vertical-align:middle;width:131px;"> <p>主轴沿水平方向从右到左</p> </td> <td style="text-align:center;vertical-align:middle;width:235px;"> <pre><code>#main { display: flex; flex-direction: row-reverse; }</code></pre> </td> <td style="text-align:center;width:306px;"><img alt="" height="831" src="https://img-blog.csdnimg.cn/1cd3242ac12a4396b944b04c53304705.png" width="827"></td> </tr> <tr> <td style="text-align:center;width:119px;">column</td> <td style="text-align:center;vertical-align:middle;width:131px;"> <p>主轴沿垂直方向从上到下</p> </td> <td style="text-align:center;vertical-align:middle;width:235px;"> <pre><code>#main { display: flex; flex-direction: column; }</code></pre> </td> <td style="text-align:center;width:306px;"><img alt="" height="839" src="https://img-blog.csdnimg.cn/9166d0fe458244b9bc818b54867ae9b9.png" width="830"></td> </tr> <tr> <td style="text-align:center;width:119px;">column-reverse</td> <td style="text-align:center;vertical-align:middle;width:131px;"> <p>主轴沿垂直方向从下到上</p> </td> <td style="text-align:center;vertical-align:middle;width:235px;"> <pre><code>#main { display: flex; flex-direction: column-reverse; }</code></pre> </td> <td style="text-align:center;width:306px;"><img alt="" height="841" src="https://img-blog.csdnimg.cn/5c91d6cb2bd74bd3ba60301884ac3ace.png" width="840"></td> </tr> </tbody> </table> #### ②flex-wrap #### **设置当项目超出父容器时是否换行**，该属性的可选值如下： ![23df8c3586d4493ab989297aece5af90.png][] ![91a8d3d8e40d4bccb40849d9f0b9f018.png][] <table style="width:680px;"> <tbody> <tr> <td style="background-color:#0066cc;text-align:center;width:119px;"><span style="color:#f3f3f4;">属性值</span></td> <td style="background-color:#0066cc;text-align:center;width:196px;"><span style="color:#f3f3f4;">描述</span></td> <td style="background-color:#0066cc;text-align:center;width:176px;"><span style="color:#f3f3f4;">代码</span></td> <td style="background-color:#0066cc;text-align:center;width:246px;"><span style="color:#f3f3f4;">效果</span></td> </tr> <tr> <td style="text-align:center;width:119px;">nowrap</td> <td style="text-align:center;vertical-align:middle;width:196px;">默认值，表示项目不会换行，所有项目挤在一行显示</td> <td style="text-align:center;vertical-align:middle;width:176px;"> <p>不写或者：</p> <pre><code>#main { display: flex; flex-wrap: nowrap; }</code></pre> <p></p> </td> <td style="text-align:center;width:246px;"><img alt="" height="833" src="https://img-blog.csdnimg.cn/1616d231925b400dab995a9989c49253.png" width="831"></td> </tr> <tr> <td style="text-align:center;width:119px;">wrap</td> <td style="text-align:center;vertical-align:middle;width:196px;"> <p>表示项目会在需要时换行</p> </td> <td style="text-align:center;vertical-align:middle;width:176px;"> <pre><code>#main { display: flex; flex-wrap: wrap; }</code></pre> </td> <td style="text-align:center;width:246px;"><img alt="" height="846" src="https://img-blog.csdnimg.cn/ac98e6e5573b44f99adde4fb804b9d40.png" width="852"></td> </tr> <tr> <td style="text-align:center;width:119px;">wrap-reverse</td> <td style="text-align:center;vertical-align:middle;width:196px;"> <p>表示项目会在需要时换行，但会以相反的顺序</p> </td> <td style="text-align:center;vertical-align:middle;width:176px;"> <pre><code>#main { display: flex; flex-wrap: wrap-reverse; }</code></pre> </td> <td style="text-align:center;width:246px;"><img alt="" height="839" src="https://img-blog.csdnimg.cn/1ab7ac4db6014f66a0ae872934d168a7.png" width="846"></td> </tr> </tbody> </table> #### ③flex-flow #### f**lex-direction和flex-wrap两个属性的简写**，写法格式如下： flex-flow:flex-direction flex-wrap 效果大家可以自行测试，我在这里举一个例子： <table style="width:680px;"> <tbody> <tr> <td style="background-color:#0066cc;text-align:center;width:175px;"><span style="color:#f3f3f4;">属性值</span></td> <td style="background-color:#0066cc;text-align:center;width:172px;"><span style="color:#f3f3f4;">描述</span></td> <td style="background-color:#0066cc;text-align:center;width:172px;"><span style="color:#f3f3f4;">代码</span></td> <td style="background-color:#0066cc;text-align:center;width:331px;"><span style="color:#f3f3f4;">效果</span></td> </tr> <tr> <td style="text-align:center;width:175px;">column wrap</td> <td style="text-align:center;width:172px;"> <p>主轴沿垂直方向从上到下</p> <p>项目会在需要时换行</p> </td> <td style="text-align:center;width:172px;"> <pre><code>#main { display: flex; flex-flow:column wrap; }</code></pre> <p></p> </td> <td style="text-align:center;width:331px;"><img alt="" height="834" src="https://img-blog.csdnimg.cn/d6f2cad247c1433786b4826a20920829.png" width="846"></td> </tr> </tbody> </table> #### ④justify-content #### 定义了项目在**主轴**上的对齐方式 <table style="width:680px;"> <tbody> <tr> <td style="background-color:#0066cc;text-align:center;width:119px;"><span style="color:#f3f3f4;">属性值</span></td> <td style="background-color:#0066cc;text-align:center;width:139px;"><span style="color:#f3f3f4;">描述</span></td> <td style="background-color:#0066cc;text-align:center;width:225px;"><span style="color:#f3f3f4;">代码</span></td> <td style="background-color:#0066cc;text-align:center;width:196px;"><span style="color:#f3f3f4;">效果</span></td> </tr> <tr> <td style="text-align:center;width:119px;">flex-start</td> <td style="text-align:center;vertical-align:middle;width:139px;"> <p>默认值</p> <p><strong><span style="color:#fe2c24;">主轴方向起点</span></strong>开始排列</p> </td> <td style="text-align:center;vertical-align:middle;width:225px;"> <pre><code>#main { display: flex; flex-direction: column; justify-content: flex-start; }</code></pre> <p></p> </td> <td style="text-align:center;width:196px;"><img alt="" height="834" src="https://img-blog.csdnimg.cn/df79c63baf49488a8202391505f4d37d.png" width="829"></td> </tr> <tr> <td style="text-align:center;width:119px;">flex-end</td> <td style="text-align:center;vertical-align:middle;width:139px;"> <p><strong><span style="color:#fe2c24;">主轴方向终点</span></strong>开始排列</p> </td> <td style="text-align:center;vertical-align:middle;width:225px;"> <pre><code>#main { display: flex; flex-direction: column; justify-content: flex-end; }</code></pre> </td> <td style="text-align:center;width:196px;"><img alt="" height="839" src="https://img-blog.csdnimg.cn/dc7dcd37573a482fb9eedc3a65f6bbac.png" width="832"></td> </tr> <tr> <td style="text-align:center;width:119px;">center</td> <td style="text-align:center;vertical-align:middle;width:139px;"> <p><strong><span style="color:#fe2c24;">主轴方向</span></strong>居中</p> </td> <td style="text-align:center;vertical-align:middle;width:225px;"> <pre><code>#main { display: flex; flex-direction: column; justify-content: center; }</code></pre> </td> <td style="text-align:center;width:196px;"><img alt="" height="842" src="https://img-blog.csdnimg.cn/5a463f55a1aa418eaabbfd77a5258eb5.png" width="849"></td> </tr> <tr> <td style="text-align:center;width:119px;">space-between</td> <td style="text-align:center;vertical-align:middle;width:139px;"> <p><strong><span style="color:#fe2c24;">主轴方向</span></strong>两端对齐，项目之间的间隔都相等</p> </td> <td style="text-align:center;vertical-align:middle;width:225px;"> <pre><code>#main { display: flex; flex-direction: column; justify-content: space-between; }</code></pre> </td> <td style="text-align:center;width:196px;"><img alt="" height="836" src="https://img-blog.csdnimg.cn/855b9bef939946d0a95a545f0291cb8b.png" width="843"></td> </tr> <tr> <td style="text-align:center;width:119px;">space-around</td> <td style="text-align:center;vertical-align:middle;width:139px;"> <p>沿着<strong><span style="color:#fe2c24;">主轴方向排列，</span></strong>每个项目两侧的间隔相等（所以，项目之间的间隔</p> <p>是项目与边框之间的间隔的一倍）</p> </td> <td style="text-align:center;vertical-align:middle;width:225px;"> <pre><code>#main { display: flex; flex-direction: column; justify-content: space-around; }</code></pre> </td> <td style="text-align:center;width:196px;"><img alt="" height="832" src="https://img-blog.csdnimg.cn/a778b956f3f54f3eb2d8d4fa49f8f728.png" width="832"></td> </tr> </tbody> </table> #### ⑤align-items #### 定义项目在**交叉轴上的对齐方式** ![4bade2b4853d483ca2c466b027a922cb.png][] <table style="width:680px;"> <tbody> <tr> <td style="background-color:#0066cc;text-align:center;width:119px;"><span style="color:#f3f3f4;">属性值</span></td> <td style="background-color:#0066cc;text-align:center;width:163px;"><span style="color:#f3f3f4;">描述</span></td> <td style="background-color:#0066cc;text-align:center;width:232px;"><span style="color:#f3f3f4;">代码</span></td> <td style="background-color:#0066cc;text-align:center;width:168px;"><span style="color:#f3f3f4;">效果</span></td> </tr> <tr> <td style="text-align:center;width:119px;">stretch</td> <td style="text-align:center;width:163px;">默认值，如果项目未设置高度或设为auto，将占满整个容器的高度</td> <td style="text-align:center;width:232px;"> <p>代码：</p> <pre><code>#main { display: flex; align-items: stretch; }</code></pre> <p></p> </td> <td style="text-align:center;width:168px;"><img alt="" height="840" src="https://img-blog.csdnimg.cn/b28fa03755ae410793439e0d823cdca6.png" width="831"></td> </tr> <tr> <td style="text-align:center;width:119px;">center</td> <td style="text-align:center;width:163px;"> <p>交叉轴的终点对齐</p> </td> <td style="text-align:center;width:232px;"> <pre><code>#main { display: flex; align-items: center; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="841" src="https://img-blog.csdnimg.cn/3eb0f7a2db6e451b973e0a5bbd7d86aa.png" width="845"></td> </tr> <tr> <td style="text-align:center;width:119px;">flex-start</td> <td style="text-align:center;width:163px;"> <p>交叉轴的起点对齐</p> </td> <td style="text-align:center;width:232px;"> <pre><code>#main { display: flex; align-items: flex-start; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="843" src="https://img-blog.csdnimg.cn/84a8914859974ede960e34554eb58edd.png" width="832"></td> </tr> <tr> <td style="text-align:center;width:119px;">flex-end</td> <td style="text-align:center;width:163px;"> <p>交叉轴的终点对齐</p> </td> <td style="text-align:center;width:232px;"> <pre><code>#main { display: flex; align-items: flex-end; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="838" src="https://img-blog.csdnimg.cn/28002ece66004dfeb9704e029c375f1e.png" width="842"></td> </tr> <tr> <td style="text-align:center;width:119px;">baseline</td> <td style="text-align:center;width:163px;"> <p>项目的第一行文字的基线对齐</p> </td> <td style="text-align:center;width:232px;"> <p>给小div块设置不同的高度</p> <pre><code><div id="main"> <div style="height: 80px"><span style="font-size: 70px">A</span></div> <div style="height: 110px"><span style="font-size: 100px">B</span></div> <div style="height: 90px"><span style="font-size: 50px">C</span></div> </div></code></pre> <p> 代码：</p> <pre><code>#main { display: flex; align-items: baseline; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="847" src="https://img-blog.csdnimg.cn/31a3b99b042b4bd48d72c9e70f58db1a.png" width="869"></td> </tr> </tbody> </table> #### ⑥align-content #### align-content属性定义了多根轴线在交叉轴方向的对齐方式（设置行对齐）。如果项目只有一根轴线，该属性不起作用。 为了便于查看效果，更改全部代码为： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</title> <style> #main { border: 1px solid black;height: 500px;width: 500px; } #main div { border: 1px solid green;background-color: rgba(73,163,62,0.91); } #main span { font-weight: bold; font-size: 45px; } #main { display: flex; flex-wrap: wrap; } </style> </head> <body> <div id="main"> <div style="height: 60px;width: 90px"><span>A</span></div> <div style="height: 80px;width: 60px"><span>B</span></div> <div style="height: 90px;width: 140px"><span>C</span></div> <div style="height: 110px;width: 70px"><span>D</span></div> <div style="height: 60px;width: 150px"><span>E</span></div> <div style="height: 90px;width: 100px"><span>F</span></div> <div style="height: 50px;width: 110px"><span>G</span></div> <div style="height: 90px;width: 120px"><span>H</span></div> <div style="height: 110px;width: 100px"><span>I</span></div> <div style="height: 80px;width: 80px"><span>J</span></div> </div> </body> </html> 以上代码效果： ![9b9c2d04a79647b998ab37b65deb05b8.png][] <table style="width:680px;"> <tbody> <tr> <td style="background-color:#0066cc;text-align:center;width:119px;"><span style="color:#f3f3f4;">属性值</span></td> <td style="background-color:#0066cc;text-align:center;width:163px;"><span style="color:#f3f3f4;">描述</span></td> <td style="background-color:#0066cc;text-align:center;width:232px;"><span style="color:#f3f3f4;">代码</span></td> <td style="background-color:#0066cc;text-align:center;width:168px;"><span style="color:#f3f3f4;">效果</span></td> </tr> <tr> <td style="text-align:center;width:119px;">stretch</td> <td style="text-align:center;width:163px;">默认值，轴线占满整个交叉轴。</td> <td style="text-align:center;width:232px;"> <p>代码：</p> <pre><code>#main { display: flex; flex-wrap: wrap; align-content: stretch; }</code></pre> <p></p> </td> <td style="text-align:center;width:168px;"><img alt="" height="1035" src="https://img-blog.csdnimg.cn/cfbea794aa474fa0b86b27afe3438c95.png" width="1037"></td> </tr> <tr> <td style="text-align:center;width:119px;">center</td> <td style="text-align:center;width:163px;"> <p>交叉轴的中点对齐</p> </td> <td style="text-align:center;width:232px;"> <pre><code>#main { display: flex; flex-wrap: wrap; align-content: center; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="1052" src="https://img-blog.csdnimg.cn/a2198420adfc43bd9fe87f47d9ac2fa6.png" width="1064"></td> </tr> <tr> <td style="text-align:center;width:119px;">flex-start</td> <td style="text-align:center;width:163px;"> <p>交叉轴的起点对齐</p> </td> <td style="text-align:center;width:232px;"> <pre><code>#main { display: flex; flex-wrap: wrap; align-content: flex-start; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="1033" src="https://img-blog.csdnimg.cn/d10adb30e5ef42e6a9d71bf3b0b83c1e.png" width="1033"></td> </tr> <tr> <td style="text-align:center;width:119px;">flex-end</td> <td style="text-align:center;width:163px;"> <p>交叉轴的终点对齐</p> </td> <td style="text-align:center;width:232px;"> <pre><code>#main { display: flex; flex-wrap: wrap; align-content: flex-end; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="1031" src="https://img-blog.csdnimg.cn/ea8bed4273d54a4c92bafc1a08866eea.png" width="1039"></td> </tr> <tr> <td style="text-align:center;width:119px;">space-between</td> <td style="text-align:center;width:163px;">与交叉轴两端对齐，轴线之间的间隔平均分布。</td> <td style="text-align:center;width:232px;"> <pre><code>#main { display: flex; flex-wrap: wrap; align-content: space-between; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="1045" src="https://img-blog.csdnimg.cn/a6301e370c4040669e452eafa814f737.png" width="1033"></td> </tr> <tr> <td style="text-align:center;width:119px;">space-around</td> <td style="text-align:center;width:163px;">每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</td> <td style="text-align:center;width:232px;"> <pre><code>#main { display: flex; flex-wrap: wrap; align-content: space-around; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="1039" src="https://img-blog.csdnimg.cn/a8a6c8b811c34184a8112012200890af.png" width="1043"></td> </tr> </tbody> </table> ### 3、项目属性 ### 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</title> <style> #main { border: 1px solid black;height: 400px;width: 400px; } #main div { border: 1px solid green;width: 80px;height: 80px;background-color: rgba(73,163,62,0.91); } #main span { font-weight: bold; font-size: 45px; } #main { display: flex; } </style> </head> <body> <div id="main"> <div><span>A</span></div> <div><span>B</span></div> <div><span>C</span></div> </div> </body> </html> 以上代码效果图： ![913d7c1fde634f5f9e593d87df4105c5.png][] #### ①order #### 设置容器中项目的排列顺序，数值越小，排列越靠前，默认为0。 <table style="width:680px;"> <tbody> <tr> <td style="background-color:#0066cc;text-align:center;width:467px;"><span style="color:#f3f3f4;">代码</span></td> <td style="background-color:#0066cc;text-align:center;width:211px;"><span style="color:#f3f3f4;">效果</span></td> </tr> <tr> <td style="text-align:center;width:467px;"> <pre><code><div id="main"> <div style="order: 3"><span>A</span></div> <div style="order: 2"><span>B</span></div> <div style="order: 1"><span>C</span></div> </div></code></pre> <p></p> </td> <td style="text-align:center;width:211px;"><img alt="" height="429" src="https://img-blog.csdnimg.cn/1b4d2b4c98ed491480bff54018ecab27.png" width="426"></td> </tr> <tr> <td style="text-align:center;width:467px;"> <pre><code><div id="main"> <div style="order: 2"><span>A</span></div> <div style="order: -2"><span>B</span></div> <div style="order: 1"><span>C</span></div> </div></code></pre> </td> <td style="text-align:center;width:211px;"><img alt="" height="830" src="https://img-blog.csdnimg.cn/1bcfdbfff7bd49489005d807ecf049b0.png" width="827"></td> </tr> </tbody> </table> #### ②align-self #### align-self属性允许单个项目在交叉轴有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 为方便查看效果，代码为： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</title> <style> #main { border: 1px solid black;height: 400px;width: 400px; } #main div { border: 1px solid green;width: 80px;height: 80px;background-color: rgba(73,163,62,0.91); } #main span { font-weight: bold; font-size: 45px; } #main { display: flex; align-items: flex-start; } </style> </head> <body> <div id="main"> <div><span>A</span></div> <div id="uniqueDiv"><span>B</span></div> <div><span>C</span></div> </div> </body> </html> 默认效果为： ![75cb702c870443c2827cc64f8c045d74.png][] <table style="width:680px;"> <tbody> <tr> <td style="background-color:#0066cc;text-align:center;width:82px;"><span style="color:#f3f3f4;">属性值</span></td> <td style="background-color:#0066cc;text-align:center;width:164px;"><span style="color:#f3f3f4;">描述</span></td> <td style="background-color:#0066cc;text-align:center;width:264px;"><span style="color:#f3f3f4;">代码</span></td> <td style="background-color:#0066cc;text-align:center;width:168px;"><span style="color:#f3f3f4;">效果</span></td> </tr> <tr> <td style="text-align:center;width:82px;">auto</td> <td style="text-align:center;width:164px;">默认值</td> <td style="text-align:center;width:264px;"> <pre><code>#main #uniqueDiv { align-self: auto; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="834" src="https://img-blog.csdnimg.cn/490c93d54188446e908c731356d9a984.png" width="849"></td> </tr> <tr> <td style="text-align:center;width:82px;">stretch</td> <td style="text-align:center;width:164px;">如果项目未设置高度或设为auto，将占满整个容器的高度</td> <td style="text-align:center;width:264px;"> <p>1.取消小div的高度设置</p> <p>2.代码：</p> <pre><code>#main #uniqueDiv { align-self: flex-end; }</code></pre> <p></p> </td> <td style="text-align:center;width:168px;"><img alt="" height="840" src="https://img-blog.csdnimg.cn/7ec620e7614f4ceb97a08b5eed5f7a32.png" width="846"></td> </tr> <tr> <td style="text-align:center;width:82px;">center</td> <td style="text-align:center;width:164px;"> <p>交叉轴的终点对齐</p> </td> <td style="text-align:center;width:264px;"> <pre><code>#main #uniqueDiv { align-self: center; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="831" src="https://img-blog.csdnimg.cn/1ef1d024aa4845b5a3af35c10b7a4634.png" width="827"></td> </tr> <tr> <td style="text-align:center;width:82px;">flex-start</td> <td style="text-align:center;width:164px;"> <p>交叉轴的起点对齐</p> </td> <td style="text-align:center;width:264px;"> <pre><code>#main #uniqueDiv { align-self: flex-start; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="834" src="https://img-blog.csdnimg.cn/490c93d54188446e908c731356d9a984.png" width="849"></td> </tr> <tr> <td style="text-align:center;width:82px;">flex-end</td> <td style="text-align:center;width:164px;"> <p>交叉轴的终点对齐</p> </td> <td style="text-align:center;width:264px;"> <pre><code>#main #uniqueDiv { align-self: flex-end; }</code></pre> </td> <td style="text-align:center;width:168px;"><img alt="" height="864" src="https://img-blog.csdnimg.cn/29cc6fdccdaf43a1bb2e303296f36ec7.png" width="847"></td> </tr> <tr> <td style="text-align:center;width:82px;">baseline</td> <td style="text-align:center;width:164px;"> <p>项目的第一行文字的基线对齐</p> </td> <td style="text-align:center;width:264px;"> <p></p> </td> <td style="text-align:center;width:168px;"></td> </tr> </tbody> </table> #### ③flex-grow #### 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</title> <style> #main { border: 1px solid black;height: 400px;width: 400px; } #main div { border: 1px solid green;width: 80px;height: 80px;background-color: rgba(73,163,62,0.91); } #main span { font-weight: bold; font-size: 45px; } #main { display: flex; } #main div { flex-grow: 1; } </style> </head> <body> <div id="main"> <div><span>A</span></div> <div><span>B</span></div> <div><span>C</span></div> </div> </body> </html> 默认效果： ![adac004fe8d9464c96e11de22ed2f89f.png][] <table style="width:680px;"> <tbody> <tr> <td style="background-color:#0066cc;text-align:center;width:467px;"><span style="color:#f3f3f4;">代码</span></td> <td style="background-color:#0066cc;text-align:center;width:467px;"><span style="color:#f3f3f4;">描述</span></td> <td style="background-color:#0066cc;text-align:center;width:211px;"><span style="color:#f3f3f4;">效果</span></td> </tr> <tr> <td style="text-align:center;width:467px;"> <pre><code>#main div { flex-grow: 1; }</code></pre> <p></p> </td> <td style="text-align:center;width:467px;">如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）</td> <td style="text-align:center;width:211px;"><img alt="" height="852" src="https://img-blog.csdnimg.cn/c1a29176ea1243bfafa24567ff61ab52.png" width="847"></td> </tr> <tr> <td style="text-align:center;width:467px;"> <pre><code><div id="main"> <div style="flex-grow: 1"><span>A</span></div> <div style="flex-grow: 2"><span>B</span></div> <div style="flex-grow: 1"><span>C</span></div> </div></code></pre> </td> <td style="text-align:center;width:467px;">如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</td> <td style="text-align:center;width:211px;"><img alt="" height="845" src="https://img-blog.csdnimg.cn/a897328f67334323af13c483d997c8ec.png" width="837"></td> </tr> </tbody> </table> #### ④flex-shrink #### 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</title> <style> #main { border: 1px solid black;height: 400px;width: 400px; } #main div { border: 1px solid green;width: 80px;height: 80px;background-color: rgba(73,163,62,0.91); } #main span { font-weight: bold; font-size: 45px; } #main { display: flex; } </style> </head> <body> <div id="main"> <div><span>A</span></div> <div><span>B</span></div> <div><span>C</span></div> </div> </body> </html> 默认效果： ![7f4fe095d7a34e3e9987835211a7dedf.png][] <table style="width:680px;"> <tbody> <tr> <td style="background-color:#0066cc;text-align:center;width:467px;"><span style="color:#f3f3f4;">代码</span></td> <td style="background-color:#0066cc;text-align:center;width:467px;"><span style="color:#f3f3f4;">描述</span></td> <td style="background-color:#0066cc;text-align:center;width:211px;"><span style="color:#f3f3f4;">效果</span></td> </tr> <tr> <td style="text-align:center;width:467px;"> <p>将大div的宽度修改为100px：</p> <p><img alt="" height="161" src="https://img-blog.csdnimg.cn/7672283d21ce49698bd8683e9769a5b3.png" width="865"></p> <p></p> </td> <td style="text-align:center;width:467px;">如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小</td> <td style="text-align:center;width:211px;"><img alt="" height="855" src="https://img-blog.csdnimg.cn/b052b7decfde4489a7f890eae89329ce.png" width="331"></td> </tr> <tr> <td style="text-align:center;width:467px;"> <p>将大div的宽度修改为150px</p> <p><img alt="" height="141" src="https://img-blog.csdnimg.cn/a3f4b48ecacc469bb05f286a2f59386a.png" width="849"></p> </td> <td style="text-align:center;width:467px;">如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</td> <td style="text-align:center;width:211px;"><img alt="" height="842" src="https://img-blog.csdnimg.cn/6967aa4dad414d4fa44c286683b00f77.png" width="339"></td> </tr> </tbody> </table> #### ⑤flex-basis #### 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。该属性可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。 #### ⑥flex #### flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)，建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 [f7972aa915db4782b0d19c1d646cfb38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/a214dcb2b321439ebde2c0d7cdafe9d9.png [9782d99af62a43c2bb5d10741a5e9be3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/5ffabab008bf4545afc15bc4e3c449f4.png [23df8c3586d4493ab989297aece5af90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/476c77254fe243838545d263b0238e0f.png [91a8d3d8e40d4bccb40849d9f0b9f018.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/5228db108da34379a727d8284abdb30f.png [4bade2b4853d483ca2c466b027a922cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/eed34175e333413bbc1899e86e044775.png [9b9c2d04a79647b998ab37b65deb05b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/c114394b93ec48f4a5ac476323de84d7.png [913d7c1fde634f5f9e593d87df4105c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/dbca00ecdcc94b1d95969f92a330651b.png [75cb702c870443c2827cc64f8c045d74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/5a6f57bcce6e4be6adb970a1749de8f3.png [adac004fe8d9464c96e11de22ed2f89f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/d8aa66e3e8a1484591cc354d17645135.png [7f4fe095d7a34e3e9987835211a7dedf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/98fa76205d8245ca82f68e6f90bfa8ec.png
相关 Flex布局 原文：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm\_source=tuicool Flex是Fl 超、凢脫俗/ 2022年09月25日 15:26/ 0 赞/ 105 阅读
相关 flex布局 转自阮一峰http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、什么是flex 任何元素都可定义为flex布 港控/mmm°/ 2022年04月02日 06:11/ 0 赞/ 266 阅读
相关 Flex布局 flex弹性布局 开发工具与关键技术：DW、Flex弹性布局 作者：黄桂康 撰写时间：2019.01.16 （一个网页的 ゝ一纸荒年。/ 2022年03月25日 08:40/ 0 赞/ 210 阅读
相关 flex布局 转 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 冷不防/ 2022年03月08日 19:20/ 0 赞/ 170 阅读
相关 Flex布局 首先要有个容器，并设置display:flex;display:-webkit-flex;该容器有以下六个属性： <table> <tbody> <tr> 谁践踏了优雅/ 2022年02月27日 16:58/ 0 赞/ 206 阅读
相关 Flex布局 Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 我会带着你远行/ 2021年11月17日 04:28/ 0 赞/ 316 阅读
相关 Flex布局 之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。 现在总结下大概的用法。 flex是把一个div分成 待我称王封你为后i/ 2021年11月05日 15:44/ 0 赞/ 386 阅读
相关 Flex布局 在我看书学习flex布局有疑惑后，在网上搜到了这篇文章，讲的很详细，一遍就差不多了就懂flex布局了，感谢原作者！ 上上下下读五六遍，在其中纠正了一些错别字、加粗了一些文字、 秒速五厘米/ 2021年09月20日 15:42/ 0 赞/ 409 阅读
相关 flex布局 flex布局 传统布局与flex布局 传统布局 flex 弹性布局 flex布局原理 flex布局父项常见属性 f 旧城等待，/ 2021年06月24日 13:58/ 0 赞/ 490 阅读
相关 flex布局 Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。在处理垂直方向的对齐比较方便，现在越来越多的浏览器已经支持flex布局，最近出的轻... 小灰灰/ 2021年04月08日 04:13/ 0 赞/ 593 阅读
超、凢脫俗
港控/mmm°
ゝ一纸荒年。
我会带着你远行
小灰灰
还没有评论，来说两句吧...