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