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 从下到上

特点值	解说阐明
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 换行

特点值	阐明
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不一样

携程网移动端首页制作

初始设置：

选取flex布局
建立根本文件
设置视口标签、引进初始化款式、特别款式
分析布局，给模块命名

查找栏部分

经过fixed定位固定查找栏，保证导航栏方位始终在页面上方

<div class="search-index">
        <div class="search">
            <span>查找:目的地/酒店/景点/航班号</span>
        </div>
        <div class="login">
            <span class="user-icon"> </span>
            <span>我 的</span>
        </div>
    </div>

经过精灵图在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;
}

游玩导航栏部分

用精灵图实现，先运用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;
}

主要功能导航栏

分红上中下三个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>

每行的盒子还需设置距离，给中间的盒子设置上下边距，或许前两个盒子都设置下边距。
发现小圆角没有呈现，那是由于div没有设置，它把父容器盖住了，给其设置overflow: hidden;，切去剩余的小圆角即可。
第一列下方需求填充布景图标，是三倍图，进行缩放。
- 图片需求靠底端对齐，水平居中。
布景色彩渐变，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;
}

便当功能导航栏

运用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>

设置圆角及布景色
需求设置左右的外边距 margin: 0 4px;，一起body设置高度大一些，不然看不到底部了height: 2000px;
引进flex布局，设置换行,实践高度依据内容撑开

.subnav-entry li {
    flex: 20%;
    flex-warp:warp;
}

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;
}

设置上边距及布景图标。

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

广告部分

整体划分出一个盒子，再经过上下细分两个子盒子。
设置边距，四个方向 =>margin: 4px;
左侧是一个图片，用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;
}

flex布局-携程网项目