代码示例

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>flex</title>
  6.         <style type="text/css">
  7.             body,ul,li{
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             ul{
  12.                 list-style: none;
  13.             }
  14.             .container{
  15.                 position: relative;
  16.                 display: flex;
  17.                 width: 800px;
  18.                 background-color: aquamarine;
  19.                 margin: 0 auto;
  20.                 text-align: center;
  21.                 line-height: 30px;
  22.                 top: 20px;
  23.                 /* height: 30px; */
  24.             }
  25.             .container>li>ul{
  26.                 position: absolute;
  27.                 width: 200px;
  28.                 text-align: center;
  29.                 background-color: #69d49d;
  30.             }
  31.             .container>li{
  32.                 flex:1;
  33.             }
  34.             .container>li:hover{
  35.                 background-color: #aaff7f;
  36.             }
  37.             .container>li>ul{
  38.                 display: none;
  39.             }
  40.             .container>li:hover>ul{
  41.                 display: block;
  42.             }
  43.             .container>li>ul>li:hover{
  44.                 background-color:  #00aa7f;
  45.             }
  46.         </style>
  47.     </head>
  48.     <body>
  49.         <ul class="container">
  50.             <li>
  51.                 PHP
  52.                 <ul>
  53.                     <li>基础</li>
  54.                     <li>进阶</li>
  55.                     <li>高级</li>
  56.                 </ul>
  57.             </li>
  58.             <li>
  59.                 WEB
  60.                 <ul>
  61.                     <li>vue</li>
  62.                     <li>uni-app</li>
  63.                     <li>node.js</li>
  64.                 </ul>
  65.             </li>
  66.             <li>Java</li>
  67.             <li>Python</li>
  68.         </ul>
  69.     </body>
  70. </html>

效果展示

总结

弹性布局就是父元素设置display:flex;,然后子元素根据需要设置属性，其中个人觉得常用的有flex：1;（子元素平均分配父元素）,flex-grow:1;（根据子元素的内容来灵活分配）。

另外，在此小demo中发现父元素仅设置line-height也可以把盒子撑开，而且子元素会继承这个行高。

更多相关文章

  1. 基本布局和块状元素
  2. 如何设置checkbox复选框某一个选项一直处于选中状态，不可取消选择
  3. h5标签学习
  4. Python的set集合详解
  5. 实现数组去重的 9 种高阶方法
  6. 解构赋值 、函数参数中使用解构的方式、 dom元素的增删改查、 da
  7. 【前端】添加draggable 属性，无论怎么设置都无法触发dragstart后
  8. 【前端】HTML5 audio ,在chrome中设置currentTime无效
  9. 【前端】Canvas 内部元素如何实现 mouseover/mousemove 事件？

随机推荐

  1. mysql语法之case when then与列转行
  2. Window7 环境下 MariaDB 的安装 及使用
  3. MySQL翻页查询技巧
  4. 请问MySql 可以处理8千万条以上的记录吗,
  5. mysql启动脚本——指定数据目录并指定配
  6. PHP OOP和MySQLi连接=致命错误:调用未定
  7. InnoDB瓶颈：放宽ACID以提高性能
  8. Hive安装与部署集成mysql
  9. 0926MySQL中ICP索引下推
  10. 【转载】----CentOS 6.5下安装MySQL 5.6.