Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex项目上的三个属性及移动商城首页的页眉和页脚的布局
Blogger Information
Blog 11
fans 0
comment 0
visits 6559
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex项目上的三个属性及移动商城首页的页眉和页脚的布局
Ghcᝰ
Original
558 people have browsed it

flex项目上的三个属性

1.项目的缩放比例与基准宽度

flex属性用法及演示：
  • a) 默认值,禁止放大,允许收缩,宽度自动
    0 1 auto
  • b) 允许放大和收缩
    1 1 auto
  • c) 禁止放大和收缩，这个属性这是通常用于PC布局
    0 0 none
    下面演示允许缩放功能
    允许放大缩小宽度自适应 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Flex项目的三个属性</title>
  9.     <style>
  10.         root: {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.             font-size: 10px;
  15.         }
  17.         body {
  18.             font-size: 1.6rem;
  19.         }
  21.         .box {
  22.             display: flex;
  23.             border: solid 1px red;
  24.             height: 80vh;
  25.         }
  27.         .item {
  28.             width: 8rem;
  29.             /* 允许放大，缩小，宽度自适应 */
  30.             flex: 1 1 auto;
  31.             border: aquamarine 1px solid;
  32.         }
  34.         .item:nth-of-type(1) {
  35.             background-color: red;
  36.         }
  38.         .item:nth-of-type(2) {
  39.             background-color: yellow;
  40.         }
  42.         .item:nth-of-type(3) {
  43.             background-color: blue;
  44.         }
  46.         .item:nth-of-type(4) {
  47.             background-color: greenyellow;
  48.         }
  49.     </style>
  51. </head>
  53. <body>
  54.     <div class="box">
  55.         <div class="item">item1</div>
  56.         <div class="item">item2</div>
  57.         <div class="item">item3</div>
  58.         <div class="item">item4</div>
  59.     </div>
  60. </body>
  62. </html>

2.单个项目在交叉轴上的对齐方式

align-self属性用法及演示：
  • a) 默认值:stretch 拉伸
  • b) flex-start 起始线（交叉轴对齐）
  • c) flex-end 终止线（交叉轴对齐）
  • d) center 居中对齐
    下面演示flex-end功能
    交叉轴终止线对齐 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Flex项目的三个属性</title>
  9.     <style>
  10.         root: {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.             font-size: 10px;
  15.         }
  17.         body {
  18.             font-size: 1.6rem;
  19.         }
  21.         .box {
  22.             display: flex;
  23.             border: solid 1px red;
  24.             height: 80vh;
  25.             /* 主轴垂直不换行 */
  26.             /* flex-flow: column nowrap; */
  27.         }
  29.         .item {
  30.             width: 8rem;
  31.             /* 底部对齐 */
  32.             align-self: flex-end;
  33.             border: aquamarine 1px solid;
  34.         }
  36.         .item:nth-of-type(1) {
  37.             background-color: red;
  38.         }
  40.         .item:nth-of-type(2) {
  41.             background-color: yellow;
  42.         }
  44.         .item:nth-of-type(3) {
  45.             background-color: blue;
  46.         }
  48.         .item:nth-of-type(4) {
  49.             background-color: greenyellow;
  50.         }
  51.     </style>
  53. </head>
  55. <body>
  56.     <div class="box">
  57.         <div class="item">item1</div>
  58.         <div class="item">item2</div>
  59.         <div class="item">item3</div>
  60.         <div class="item">item4</div>
  61.     </div>
  62. </body>
  64. </html>

3.项目在主轴上排列顺序

order属性用法及演示：
  • a) 显示顺序:按书写的序号越小越靠前,越大越靠后
    下面演示order设置倒序功能
    使用order属性设置项目倒叙排列 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Flex项目的三个属性</title>
  9.     <style>
  10.         root: {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.             font-size: 10px;
  15.         }
  17.         body {
  18.             font-size: 1.6rem;
  19.         }
  21.         .box {
  22.             display: flex;
  23.             border: solid 1px red;
  24.             height: 80vh;
  25.             /* 主轴垂直不换行 */
  26.             /* flex-flow: column nowrap; */
  27.         }
  29.         .item {
  30.             width: 8rem;
  31.             /* 居中对齐 */
  32.             align-self: center;
  33.             border: aquamarine 1px solid;
  34.         }
  36.         /* 设置倒序 */
  37.         .item:nth-of-type(1) {
  38.             background-color: red;
  39.             order: 4;
  40.         }
  42.         .item:nth-of-type(2) {
  43.             background-color: yellow;
  44.             order: 3;
  45.         }
  47.         .item:nth-of-type(3) {
  48.             background-color: blue;
  49.             order: 2;
  50.         }
  52.         .item:nth-of-type(4) {
  53.             background-color: greenyellow;
  54.             order: 1;
  55.         }
  56.     </style>
  58. </head>
  60. <body>
  61.     <div class="box">
  62.         <div class="item">item1</div>
  63.         <div class="item">item2</div>
  64.         <div class="item">item3</div>
  65.         <div class="item">item4</div>
  66.     </div>
  67. </body>
  69. </html>

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

页头页脚布局 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="static/css/index.css">
  10.     <link rel="stylesheet" href="static/icon-font/iconfont.css">
  11.     <link rel="stylesheet" href="static/css/header.css">
  12.     <link rel="stylesheet" href="static/css/footer.css">
  13. </head>
  15. <body>
  16.     <!-- 页眉 -->
  17.     <div class="header">
  18.         <!-- 菜单 -->
  19.         <div class="menu iconfont icon-menu"></div>
  20.         <!-- 搜索框 -->
  21.         <div class="search">
  22.             <div class="logo">
  23.                 JD
  24.             </div>
  25.             <div class="zoom iconfont icon-search"></div>
  26.             <input type="text" class="words" value="移动硬盘500G">
  27.         </div>
  28.         <!-- 登录按钮 -->
  29.         <a href="" class="login">登录</a>
  31.     </div>
  32.     <div class="main">
  33.         主体
  34.     </div>
  35.     <div class="footer">
  36.         <div>
  37.             <div class="iconfont icon-home"></div>
  38.             <span>首页</span>
  39.         </div>
  40.         <div>
  41.             <div class="iconfont icon-layers"></div>
  42.             <span>分类</span>
  43.         </div>
  44.         <div>
  45.             <div class="iconfont icon-Group-"></div>
  46.             <span>惊喜</span>
  47.         </div>
  48.         <div>
  49.             <div class="iconfont icon-shopping-cart
  50. "></div>
  51.             <span>购物车</span>
  52.         </div>
  53.         <div>
  54.             <div class="iconfont icon-user"></div>
  55.             <span>未登录</span>
  56.         </div>
  57.     </div>
  59. </body>
  61. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post