flex基础：flex项目上的三个属性以及利用flex完成移动商城首页的页眉和页脚布局

flex项目上的三个属性

flex:项目的缩放比例与基准宽度
align-self:单个项目在交叉轴上的对齐方式
order:项目在主轴上排列顺序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      :root {
        font-size: 10px;
      }
      body {
        font-size: 1.6rem;
      }
      .container {
        display: flex;
        height: 100vh;
        border: 2px solid #000000;
      }
      .container > .item {
        padding: 3rem;
        /* height: 5rem; */
        /* width: 10rem; */
        background-color: cyan;
        border: 1px solid rosybrown;
        /* flex:项目的缩放比例与基准宽度 */
        /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
        /* 默认,禁止放大,允许收缩,宽度自动 */
        flex: 0 1 auto;
        /* 简写 */
        flex: initial;
        /* 允许放大和收缩 */
        flex: 1 1 auto;
        /* 简写 */
        flex: auto;
        /* 禁止放大和收缩,一般用于PC布局 */
        flex: 0 0 auto;
        /* 简写 */
        flex: none;
      }
      /* 案例,要求第2个项目的宽度是其他项目的两倍 */
      .container > .item:nth-of-type(2) {
        flex: 2 1 auto;
      }
      .container > .item:first-of-type,
      .container > .item:last-of-type {
        flex: 1 1 auto;
      }
      /* align-self:单个项目在交叉轴上的对齐方式 */
      .container > .item:nth-of-type(2) {
        /* 默认拉伸 */
        align-self: stretch;
        /* 起始线 */
        align-self: flex-start;
      }
      .container > .item:first-of-type {
        /* 终止线 */
        align-self: flex-end;
      }
      .container > .item:last-of-type {
        /* 居中 */
        align-self: center;
      }
      /* order:项目在主轴上排列顺序 */
      .container > .item:nth-of-type(2) {
        /* 默认序号越小越靠前,越大越靠后 */
        order: 3;
      }
      .container > .item:first-of-type {
        ordre: 2;
      }
      .container > .item:last-of-type {
        order: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

移动商城首页的页眉和页脚布局

html页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="static/css/reset.css" />
    <link rel="stylesheet" href="static/icon-font/iconfont.css" />
    <link rel="stylesheet" href="static/css/index.css" />
    <link rel="stylesheet" href="static/css/header.css" />
    <link rel="stylesheet" href="static/css/footer.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <!-- 菜单栏 -->
      <div class="caidan iconfont icon-menu"></div>
      <!-- 搜索框 -->
      <div class="search">
        <div class="logo">JD</div>
        <div class="fangda iconfont icon-search"></div>
        <input type="text" class="words" value="保险箱" />
      </div>
      <!-- 登录按钮 -->
      <a href="" class="denglu">登录</a>
    </header>
    <main></main>
    <footer>
      <div>
        <div class="iconfont icon-home"></div>
        <span>主页</span>
      </div>
      <div>
        <div class="iconfont icon-layers"></div>
        <span>分类</span>
      </div>
      <div>
        <div class="iconfont icon-kehuguanli"></div>
        <span>京喜</span>
      </div>
      <div>
        <div class="iconfont icon-shopping-cart"></div>
        <span>购物车</span>
      </div>
      <div>
        <div class="iconfont icon-user"></div>
        <span>未登录</span>
      </div>
    </footer>
  </body>
</html>

初始化

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
a {
  color: #7b7b7b;
  text-decoration: none;
}
body {
  background-color: #f6f6f6;
}
html {
  font-size: 10px;
}
@media screen and (min-width: 480px) {
  html {
    font-size: 12px;
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 16px;
  }
}

index.css

header {
  background-color: #e43130;
  color: #fff;
  height: 4.4rem;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 100;
}
main {
  position: absolute;
  top: 4.4rem;
  bottom: 4.4rem;
}
footer {
  background-color: #fafafa;
  color: #666;
  height: 4.4rem;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
}

header.css

header {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
header .caidan {
  flex: 1;
  text-align: center;
  font-size: 2.5rem;
}
header .search {
  flex: 5;
  background-color: #ffffff;
  border-radius: 3rem;
  display: flex;
  padding: 0.35rem 0.5rem;
}
header .search .logo {
  font-size: 1.8rem;
  color: #e43130;
  flex: 0 1 4rem;
  text-align: center;
}
header .search .fangda {
  color: #ccc;
  flex: 0 1 4rem;
  border-left: 1px solid;
  align-self: center;
  text-align: center;
}
header .search .words {
  flex: auto;
  border: none;
  outline: none;
  color: #aaa;
}
header .denglu {
  flex: 1;
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
}

footer.css

footer {
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
}
footer div .iconfont {
  font-size: 1.4rem;
}
footer div span {
  font-size: 0.8rem;
}

flex项目上的三个属性

移动商城首页的页眉和页脚布局

更多相关文章

随机推荐