20.3.弹性布局flex · HTML+CSS学习笔记

## 20.3.1.基本概念弹性布局是指，可以设定一个容器盒子中的若干个（数量可变的）子盒子，在父盒子中的横向或纵向有序整齐排列。其典型应用就是页面中的导航布局的实现，如下图所示： ![](https://img.kancloud.cn/20/b9/20b93f16d5fd78e4e3ca03d82b6af5c0_571x43.png) 弹性布局的实现，主要是在父盒子（容器盒子）上定义相应的属性，则其内部的子盒子就能够按照所定义的样式进行显示。 ## 20.3.2.主要属性弹性布局的主要属性设置包括如下几个： * display: flex; 说明：设置盒子的显示模式为弹性盒模型，即该盒子成为了弹性盒模式的容器盒子。 * flex-direction: 说明：设置弹性盒模式的子盒子的排列方式，有如下4个方式（4个属性值）： row：横向排列， row-reverse：横向排列，但顺序反向 column：纵向排列 column-reverse：纵向排列，但顺序反响 * flex-wrap：说明：设置弹性盒模式的子盒子超出时的换行特性，常用属性值有： nowrap：不换行，尽量在一行显示，这是默认值。此时有可能会超出父盒子（当子盒子有最小宽度设置时）。 wrap：自动换行。 wrap-reverse：换行，但反向显示（即其实显示到上一行去了） * justify-content： ![](https://img.kancloud.cn/0f/89/0f89a32eb1bf43f2e77211032d64c80e_719x229.png) 说明：设置子盒子的主轴方向的一行中的排布方式。所谓主轴就是由flex-direction所决定的方向为主轴，对应另一个方向为辅轴。假如flex-direction为row或row-reverse，则横向为主轴，纵向为辅轴。假如flex-direction为column或column-reverse，则纵向为主轴，横向为辅轴。常用属性值有： flex-start：子盒子从所设定的起始位置开始排列出来，空隙留后面； flex-end：子盒子从所设定的终止位置开始排列出来，空隙留前面； center：子盒子完全从居中的位置开始排列出来，空隙留两边； space-between：子盒子两边紧靠父盒子，空隙留在相互的中间且均等； space-around：子盒子均衡布置，分布给每个盒子的空隙都一样。图示如下： ![](https://img.kancloud.cn/d6/18/d6183f341c2bc14d3a50ff993387870d_739x328.png) 两个重要概念：主轴，辅轴 ![](https://img.kancloud.cn/98/56/98565587c3a03943d1289a590cf4a687_618x184.png) ![](https://img.kancloud.cn/1e/1a/1e1af52896caf52721210276dcfbc43b_722x235.png) * align-content：说明：设置子盒子在辅轴方向的排布方式，大于一行且辅轴有多余空间时时才有效。常用的属性值有： flex-start：子盒子从所设定的起始位置开始排列出来，空隙留后面； flex-end：子盒子从所设定的终止位置开始排列出来，空隙留前面； center：子盒子完全从居中的位置开始排列出来，空隙留两边； space-between：子盒子两边仅靠父盒子，空隙留在相互的中间； space-around：子盒子均衡布置，空隙均衡出现；图示如下： ![](https://img.kancloud.cn/e8/28/e828052e8d68a8ead0a7d698702c861e_1024x768.png) * align-items： ![](https://img.kancloud.cn/10/27/102720d3e71509922ce86f3169c373f5_720x234.png) 说明：设置子盒子在当前行中辅轴方向的对齐方式。 flex-start：子盒子定位于所设定的起始位置，空隙留后面； flex-end：子盒子定位于设定的终止位置，空隙留前面； center：子盒子定位于居中的位置，空隙留两边； baseline：子盒子定位于基准位置； stretch：子盒子进行拉伸（充满纵轴）； ![](https://img.kancloud.cn/ab/52/ab52c0651114276b36b33350850ce46a_692x722.png) ## 20.3.3.应用案例实现类似如下网页效果的版面布局： ![](https://img.kancloud.cn/4d/ae/4daec6db5a0785ebc52117873b3f6fed_767x239.png) 代码如下： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; color:black; list-style: none; } .page{ width:90%; min-width:600px; border:solid 1px red; margin:0 auto; } nav ul{ display: flex; justify-content:space-between; background: gray; margin:2px 0; } nav ul li{ background: purple; } .body{ display: flex; } .body>.left, .body>.right{ width:200px; background: yellow; } .body>.center{ background: pink; border:solid 1px blue; margin:0 15px; /*这就是关键所在！！！*/ width:100%; } .body>.center>.c2, .body>.center>.c4 { display: flex; justify-content:space-between; } .body>.center>.c2>div{ width:49%; border:solid 1px green; } .body>.center>.c4>div{ width:32.5%; background: orange; } </style> </head> <body> <div class="page"> <header>头部</header> <nav> <ul> <li>首页</li> <li>关于我们</li> <li>新闻公告新闻公告</li> <li>产品介绍</li> <li>客户服务</li> </ul> </nav> <div class="body"> <div class="left">左</div> <div class="center"> <div class="c1">中间1</div> <div class="c2"> <div>c2a</div> <div>c2b</div> </div> <div class="c3">中间2</div> <div class="c4"> <div>c4a</div> <div>c4b</div> <div>c4c</div> </div> <div class="c5">中间3</div> </div> <div class="right">右</div> </div> <footer>底部</footer> </div> </body> </html> ```