伸缩布局案例-携程

来源：互联网发布：邮箱的正则表达式的js 编辑：程序博客网时间：2024/05/17 08:15

放大：

伸缩布局的相关知识点：

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

none：

none关键字的计算值为: 0 0 auto

<' flex-grow '>：

用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
在「flex」属性中该值如果被省略则默认为「1」

<' flex-shrink '>：

用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」

<' flex-basis '>：

用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">       * {       margin: 0;       padding: 0;       list-style: none;       }       a {       text-decoration: none;       color: #333;              }       img {       display: block;       width: 100%;                       }       /*导航模块*/       .item {       height: 90px;       display: flex;       background-color: deeppink;       margin:10px;       border-radius: 15px;       }       .item .pub {       flex:1;       width: 200px;       border-right: 1px solid #fff;       border-bottom: 1px solid #fff;       border-top: 1px solid #fff;       }        .item .sub {       flex:2;       }       .item .sub a {       height: 45px;       line-height: 45px;       width: 50%;       float: left;       border: 1px solid #fff;       /*设置盒子的内减模式*/       box-sizing: border-box;       }              .item:nth-child(2) {       background-color: lightyellow;       }       .item:nth-child(3) {       background-color: lightblue;       }       .item:nth-child(4) {       background-color: lightgreen;       }       .extre {       display: flex;       }       .extre a {       margin: 5px;       height: 100px;       overflow: hidden;       flex:1;       }       .f-nav {       margin: 5px;       height: 40px;       line-height: 40px;       border-top: 1px solid #ccc;       border-bottom: 1px solid #ccc;       display: flex;       text-align: center;       }       .f-nav li {       flex:1;       }       .footer p {       text-align: center;       font-size: 16px;       color: #999;       line-height: 30px;       }       .item:nth-child(4) .pub a{       display: block;       width: 100%;       height: 45px;       line-height: 45px;       box-sizing: border-box;       border-bottom: 2px solid #fff;              }</style></head><body><div class="layout"><div class="banner"><a href="#"><img src="banner.png"></a></div><div class="nav"><div class="item"><div class="pub"></div><div class="sub"><a href="javascript:;">海外酒店</a><a href="">团购</a><a href="">特惠酒店</a><a href="">客栈公寓</a></div></div><div class="item"><div class="pub"></div><div class="sub"><a href="javascript:;">海外酒店</a><a href="">团购</a><a href="">特惠酒店</a><a href="">客栈公寓</a></div></div><div class="item"><div class="pub"></div><div class="sub"><a href="javascript:;">海外酒店</a><a href="">团购</a><a href="">特惠酒店</a><a href="">客栈公寓</a></div></div><div class="item"><div class="pub"><a href="#">门票</a><a href="#">10000</a></div><div class="sub"><a href="javascript:;">海外酒店</a><a href="">团购</a><a href="">特惠酒店</a><a href="">客栈公寓</a></div></div>        <div class="extre">        <a href="#"><img src="a_03.jpg"></a>        <a href="#"><img src="a_06.jpg"></a>        </div>        <div class="footer">        <ul class="f-nav">        <li>客户端</li>        <li>关于</li>        <li>联系我们</li>        </ul>        <p>欢迎 | 欢迎 | 欢迎</p>        <p>@2015 携程旅行        </div></div></div></body></html>

0 0