flex布局-携程网项目

体验flex布局

传统布局与flex弹性布局

传统布局	flex弹性布局
兼容性好	操作方便，移动端应用很广泛
布局繁琐	pc端情况差
局限性	IE 11或更低版本很难支持

flex布局原理

• 定义： flexible box弹性布局，任何一个容器都可以指定为flex布局
• 注意点：
  • 当我们为父元素设置flex，子元素的float,clear,vertical-align属性将失效
  • 子容器可以横向排列也可以纵向排列
• 总结： 通过给父盒子添加flex，来控制子盒子的位置和排列方式

flex布局常用属性

flex布局父项常用属性

• 设置主轴的方向-flex-direction

  • 注意: 主轴和侧轴是会变化， flex-direction 设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的。

    属性值	解释说明
    row	默认值 - 从左到右
    row-reverse	从右到左
    column	从上到下
    column-reverse	从下到上

• 主轴子元素排列方式-justify-content

  • 定义项目（子元素）在主轴上的对齐方式，在使用之前一定要先确认主轴方向

    属性值	解释说明
    flex-start	默认值 - 从头部开始，如果主轴是x轴,则从左到右
    center	在主轴居中对齐(如果主轴是x轴则水平居中)
    space-around	平分剩余空间
    space-between	先两边贴边再平分剩余空间(重要)
    flex-end	在主轴结束位置对齐

• 设置子元素是否换行-flex-wrap

  • flex布局中是默认不换行的（如果超过父盒子子元素会被压缩），项目都排在一条线（又称“轴线”） 上可使用flex-wrap进行调整

    属性值	说明
    no-wrap	默认值，不需要设置，默认不换行
    wrap	换行

• 侧轴上子元素排列方式（单行）-align-items

  • 该元素是控制子项在侧轴（默认Y轴）上的排列方式，在子元素为单项（单行）的时候使用

    属性值	解释说明
    flex-start	默认值 - 从上到下（顶对齐）
    dlex-end	从下到上（底对齐）
    center	挤在一起居中（垂直居中）
    stretch	拉伸（不设置子元素高度）

• 侧轴上子元素排列方式（多行）-align-content

  • 设置子项在侧轴的排列方式，且只能用于子元素出现换行的情况下使用（多行），在单行下没有效果

    属性值	解释说明
    flex-start	在侧轴的头部开始排列
    flex-end	在侧轴的尾部开始排列
    center	在侧轴中间显示
    space-around	子项在侧轴平分剩余空间
    space-between	子项在侧轴先分布在两头,再平分剩余空间
    stretch	设置子项元素高度平分父元素高度

• 复合属性-flex-flow

  • flex-direction和flex-wrap属性的复合属性

flex布局子项常见属性

• 子项常见属性
  • flex子项目占的份数
  • align-self 控制子项自己在侧轴排列方式
  • order 属性定义子项的排列顺序（前后顺序）
• flex属性
  • 定义子子项目分配父盒子剩余空间，flex表示占多少份数，属性值为数字，默认值为0
  • 注：分配剩余空间会使用剩余空间/份数之和，然后根据每个子元素的flex值分给多少份
• 控制子元素自己在侧轴上的排列方式-align-self
  • 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，这等同于strech（拉伸）。
• 项目排列顺序-order
  • 调整子项加载的顺序，默认值是0，如果想往前提，属性值可以为负数，数值越小排列越靠前。
  • 注：和z-index不一样

携程网移动端首页制作

初始设置：

1. 选取flex布局
2. 搭建基本文件
3. 设置视口标签、引入初始化样式、特殊样式
4. 分析布局，给模块命名

搜索栏部分

1. 通过fixed定位固定搜索栏，保证导航栏位置始终在页面上方

<div class="search-index">
        <div class="search">
            <span>搜索:目的地/酒店/景点/航班号</span>
        </div>
        <div class="login">
            <span class="user-icon"> </span>
            <span>我 的</span>
        </div>
    </div>
复制代码

1. 通过精灵图在css里设置搜索框需要的图标

.search-index {
    display: flex;
    width: 100%;
    height: 44px;
    padding-left: 12px;
    box-sizing: border-box;
    align-items: center;
}
.search-index .search {
    display: flex;
    align-items: center;
    flex: 1;
    height: 28px;
    padding: 2px 5px;
    border-radius: 16px;
    box-sizing: border-box;
    background-color: #fff;
}
.search-index .search span {
    padding-left: 35px;
    line-height: 18px;
    font-size: 15px;
    color: #666;
}
.search-index .search span::after{
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    background: url() no-repeat 0px 0px;
    background-size: 21px auto;
    left: 10px;
    top: 2px;
}
.search-index.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 51px;
    height: 44px;
    padding-right: 4px;
    background-color: ■skyblue;
}
.search-index.login::after{
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: url() no-repeat 0px -36px ;
    background-size: 21px auto;
    order: -1;
}
.search-index.login span{
    font-size: 12px;
    color: #fff;
    line-height: 12px;
}
复制代码

游玩导航栏部分

1. 用精灵图实现，先使用display:flex开启flex布局然后设置好一个的li让图片和文字上下排列，接下来就通过background-position修改一下其他图片的位置就可以了。

  <ul class="local-nav">
    <li>
      <a><span class="icon-local"></span> <span>攻略·景点</span></a>
    </li>
    <li>
      <a><span class="icon-local icon-local-around"></span>
        <span>门票·玩乐</span></a>
    </li>
    <li>
      <a><span class="icon-local icon-local-food"></span>
        <span>美食林</span></a>
    </li>
    <li>
      <a><span class="icon-local icon-local-oneday"></span>
        <span>周边游</span></a>
    </li>
    <li>
      <a><span class="icon-local icon-local-strategy"></span>
        <span>一日游</span></a>
    </li>
  </ul>
复制代码

css代码

/* two */
.grid-nav .grid-nav-common .grid-nav-items .grid-nav-jhj-text,
.local-nav,
.local-nav li a {
    position: relative;
}
 
.local-nav {
    background: #fff;
    border-radius: 8px;
    margin: -52px 12px 10px;
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
    z-index: 11;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
 
.local-nav li {
    flex: 1;
}
 
li {
    list-style-type: none;
}
 
.local-nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .75rem;
    line-height: 1;
    color: #222;
}
 
.local-nav li .icon-local {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-image: url('../images/home-fivemain-sprite2x@v7.15.png');
    background-repeat: no-repeat;
    background-size: 40px auto;
    display: block;
}
 
.local-nav li .icon-local-around {
    background-position: 0 -40px;
}
 
.local-nav li .icon-local-food {
    background-position: 0 -80px;
}
 
.local-nav li .icon-local-oneday {
    background-position: 0 -120px;
}
 
.local-nav li .icon-local-strategy {
    background-position: 0 -160px;
}
复制代码

主要功能导航栏

1. 分成上中下三个flex布局，每一个内容只不过是颜色和文字有一些变化
   • 主导航栏 => 大盒子里包含三行，每一行再分三列，后面两列细分上下两行。
   • 大盒子用nav，小盒子用div。
   • 宽度不用给，左右下（上：上一个盒子设置过了）设置margin，高度小盒子撑开即可，设置小圆角。

       <nav>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div class="nav-common">2</div>
        <div class="nav-common">3</div>
    </nav>

复制代码

1. 每行的盒子还需设置距离 ，给中间的盒子设置上下边距，或者前两个盒子都设置下边距。
2. 发现小圆角没有出现，那是因为div没有设置，它把父容器盖住了，给其设置overflow: hidden;，切去多余的小圆角即可。
3. 第一列下方需要填充背景图标，是三倍图，进行缩放。
   • 图片需要靠底端对齐，水平居中。
4. 背景颜色渐变，css3新增属性。
   • 从一种颜色逐渐变为另一种颜色。
   • 背景渐变必须添加浏览器私有前缀
   • 起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top

nav {
    border-radius: 8px;
    margin: 0 4px 3px;
}
.nav-common {
    height: 88px;
    background-color: pink;
}
.nav-common:nth-child(2) {
    margin: 3px 0;
}
.nav-items:nth-child(1) a {
    border: 0;
    background: url(../images/hotel.png) no-repeat;
    background-size: 121px auto;
}
background: url(../images/hotel.png) no-repeat bottom center;
.nav-items:nth-child(1) a {
    border: 0;
}

.nav-common:nth-child(1) .nav-items:nth-child(1) a {
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
}

.nav-common:nth-child(2) .nav-items:nth-child(1) a {
    background: url(../images/plane.png) no-repeat bottom center;
    background-size: 81px auto;
}

.nav-common:nth-child(3) .nav-items:nth-child(1) a {
    background: url(../images/travel.png) no-repeat bottom center;
    background-size: 94px auto;
}
.nav-common:nth-child(1) {
    background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}

.nav-common:nth-child(2) {
    background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
}

.nav-common:nth-child(3) {
    background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}
.nav-items:nth-child(1) a {
    border: 0;
}

.nav-common:nth-child(1) .nav-items:nth-child(1) a {
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
}

.nav-common:nth-child(2) .nav-items:nth-child(1) a {
    background: url(../images/plane.png) no-repeat bottom center;
    background-size: 81px auto;
}

.nav-common:nth-child(3) .nav-items:nth-child(1) a {
    background: url(../images/travel.png) no-repeat bottom center;
    background-size: 94px auto;
}

复制代码

便利功能导航栏

1. 使用ul，li标签结构

    <!-- 侧导航栏 -->
    <ul class="subnav-entry">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
复制代码

1. 设置圆角及背景色
2. 需要设置左右的外边距 margin: 0 4px;，同时body设置高度大一些，否则看不到底部了 height: 2000px;
3. 引入flex布局，设置换行,实际高度根据内容撑开

.subnav-entry li {
    flex: 20%;
    flex-warp:warp;
}
复制代码

1. li中放入a标签，两个span标签放入a中，第一个为图标，第二个为文字，设置主轴为y轴，侧轴居中

        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <spa>WIFI电话卡</spa>
            </a>
        </li>
复制代码

.subnav-entry a {
    display: flex;
    flex-direction: column;
    align-items: center;
}
复制代码

1. 设置上边距及背景图标。

.subnav-entry-icon {
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
}
复制代码

广告部分

1. 整体划分出一个盒子，再通过上下细分两个子盒子。
2. 设置边距，四个方向 => margin: 4px;
3. 左侧是一个图片，用h2标签，里面也将图片文字内容加入，这里主要方便搜索引擎搜索， 右侧用a标签可以点击，再放入图片，h2中的文字是不需要显示的，使它隐藏，用伪元素设置背景图片，因为是行内元素是看不到的，使用绝对定位即可。。

    <div class="sales-box">
        <div class="sales-hd">
            <h2>热门活动</h2>
            <a href="#">更多</a>
        </div>
    </div>
复制代码

.sales-hd h2 {
    position: relative;
    text-indent: -999px;
    overflow: hidden;
}

.sales-hd h2::after {
    position: absolute;
    top: 8px;
    left: 20px;
    content: "";
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}
复制代码

页面底部

通过flex排列一下上下图片和文字css样式

.tool-cn {
    margin-bottom: 5px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
 
    align-items: center;
    justify-content: center;
}
 
.tool-cn .tool-cn-link {
    position: relative;
 
    flex: 1;
    color: #333;
    font-size: 12px;
 
    display: flex;
 
    align-items: center;
 
    justify-content: center;
 
    flex-direction: column;
    padding: 10px 0;
}
 
.tool-cn .tool-cn-link svg {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
}