search

博客列表 >flex项目的三个属性及商城页眉页脚布局

flex项目的三个属性及商城页眉页脚布局

Blastix Riotz
Blastix Riotz原创
2021年04月01日 18:26:07593浏览

flex项目的三个属性

描述 属性
项目的缩放比例与基准宽度 flex
单个项目在交叉轴上的对齐方式 align_self
项目砸主轴上的排列顺序 order

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

  • 实例
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>项目上的flex属性</title>
    8.   <style>
    9.     * {
    10.       box-sizing: ;
    11.     }
    12.     :foot {
    13.       font-size: 10px;
    14.     }
    15.     body {
    16.       font-size: 1.6rem;
    17.     }
    18.     /* flex容器 */
    19.     .container {
    20.       display: flex;
    21.       height: 20rem;
    22.       border: 1px solid black;
    23.     }
    24.     /* /项目样式： */
    25.     .container > .item {
    26.       width: 10rem;
    27.       /* max-width: 10rem; */
    28.       background-color: lightcyan;
    29.       border: 1px solid black;
    30.       /* 设置项目是否允许放大 */
    31.       /* flex-grow: 1; */
    32.       /* 设置项目是否允许收缩 */
    33.       /* flex-shrink: 0; */
    34.       /* 设置项目在主轴空间的大小 */
    35.       /* flex-basis: 15rem; */
    36.       /* max-width>flex-basis>width */
    37.       /* flex: 放大因子 收缩因子 计算大小; */
    38.       /* flex: 1 0 15rem; */
    39.     }
    40.     /* flex属性 */
    41.     .container .item {
    42.       /* flex:默认值，禁止放大，允许缩小。宽度自动 */
    43.       /* flex: 0 1 auto; */
    44.       /* flex: initial; */
    45.       /* 允许放大与收缩 */
    46.       /* flex: 1 1 auto; */
    47.       /* flex: auto; */
    48.       /* 完全失去弹性：禁止放大和收缩 ,用于pc端 */
    49.       /* flex: 0 0 auto; */
    50.       /* flex: none; */
    51.       /* 单值：仅表示是否放大 */
    52.       /* flex: 1; */
    53.       /* flex: auto; */
    54.       /* felx: 2; */
    55.       /* flex: 250; */
    56.       /*无任何效果 */
    57.     }
    58.     /* 选的是第一个和第四个 */
    59.     .container > .item:first-of-type,
    60.     .container > .item:last-of-type {
    61.       background-color: yellow;
    62.       /* flex: 1 1 auto; */
    63.       flex: 1;
    64.     }
    65.     /* 选的是低2和3个 */
    66.     .container > .item:nth-of-type(2) ,
    67.     .container > .item:nth-of-type(2) + * {
    68.       background-color: lightgreen;
    69.       /* flex: 2 1 auto; */
    70.       flex: 2;
    71.     }
    72.     /* .container > .item:last-of-type {
    73.       background-color: coral;
    74.       /* flex: 1 1 auto; */
    75.       flex: 1;
    76.     } */
    77.   </style>
    78. </head>
    79. <body>
    80.   <div class="container">
    81.     <div class="item">item1</div>
    82.     <div class="item">item2</div>
    83.     <div class="item">item3</div>
    84.     <div class="item">item4</div>
    85.   </div>
    86. </body>
    87. </html>

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

  • 实例
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>项目上的align_self属性</title>
    8. <style>
    9.     /* flex容器 */
    10.     .container {
    11.       display: flex;
    12.       height: 20rem;
    13.       border: #000 solid 1px;
    14.     }
    15.     .container .item {
    16.       width: 10rem;
    17.       background-color: lightcyan;
    18.       border: 1px solid #000;
    19.     }
    20.     /* 设置单个项目的垂直对齐方式 */
    21.     .item.three {
    22.       background-color: yellow;
    23.       align-self: flex-start;
    24.       align-self: flex-end;
    25.       align-self: stretch;
    26.       align-self: center;
    27.     }
    28.     /* flex项目支持定位，但不支持浮动 */
    29.     /* 先设置定位父级 */
    30.     .container {
    31.       position: relative;
    32.     }
    33.     /* 设置子元素定位 */
    34.     .container .item:nth-of-type(3) {
    35.       position: absolute;
    36.     }
    37.   </style>
    38. </head>
    39. <body>
    40.   <div class="container">
    41.     <div class="item">item1</div>
    42.     <div class="item">item2</div>
    43.     <div class="item three">item3</div>
    44.     <div class="item">item4</div>
    45.   </div>
    46. </body>

order 项目砸主轴上的排列顺序

  • 实例
    1. <style>
    2.     /* flex容器 */
    3.     .center {
    4.       display: flex;
    5.       height: 20rem;
    6.       border: #000 solid 1px;
    7.     }
    8.     /* 项目样式：必须是flex容器的子元素 */
    9.     .center .item {
    10.       width: 10rem;
    11.       background-color: lightcyan;
    12.       border: 1px solid #000;
    13.       /* 把所有项目的顺序都设置为0 */
    14.       order: 0;
    15.     }
    16.     /* 排列顺序是order的值谁小谁靠前，谁大谁靠后  */
    17.     .item.one {
    18.       background-color: #fff;
    19.       order: 5;
    20.     }
    21.     .item.two {
    22.       background-color: #ff7;
    23.       order: -1;
    24.     }
    25.     .item.three {
    26.       background-color: #9f7;
    27.     }
    28.     .item.four {
    29.       background-color: #897;
    30.     }
    31.     /* order的值越小越靠前，越大越靠后 */
    32.   </style>
    33. </head>
    34. <body>
    35.   <div class="center">
    36.     <div class="item one">item1</div>
    37.     <div class="item two">item2</div>
    38.     <div class="item three">item3</div>
    39.     <div class="item four">item4</div>
    40. </body>
    41. </html>

仿写京东首页


index.html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>商城仿写</title>
  7.     <!-- 字体图标 -->
  8.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  9.     <!-- 首页 -->
  10.     <link rel="stylesheet" href="static/css/index.css" />
  11.     <!-- 页眉区 -->
  12.     <link rel="stylesheet" href="static/css/header.css" />
  13.     <!-- 页脚区 -->
  14.     <link rel="stylesheet" href="static/css/footer.css" />
  15.   </head>
  17.   <body>
  18.     <!-- 页眉 -->
  19.     <div class="header">
  21.       <div class="menu iconfont icon-menu"></div>
  22.       <!-- 搜索框 -->
  23.       <div class="search">
  24.         <div class="logo">JD</div>
  25.         <span class="zoom iconfont icon-search"></span>
  26.         <input class="words" type="text" value="大吉大利晚上吃鸡" />
  27.       </div>
  28.       <!-- 登录按钮 -->
  29.       <a href="" class="login">登录</a>
  30.     </div>
  31.     <!-- 主体 -->
  32.     <div class="main"></div>
  33.     <!-- 页脚 -->
  34.     <div class="footer">
  35.         <span>主页</span>
  36.         <span>分类</span>
  37.         <span>京喜</span>
  38.         <span>购物车</span>
  39.         <span>未登录</span>
  40.     </div>
  41.   </body>
  42. </html>

header.css

  1. .header {
  2.     display: flex;
  3.     align-items: center;
  4. }
  5. /* 页眉中的三个部分比例 1:6:1 */
  6. .header .login {
  7.     color:#fff;
  8.     text-align: center;
  9.     flex: 1;
  10. }
  12. .header .menu {
  13.     text-align: center;
  14.     flex: 1;
  15.     font-size: 2.5rem;
  16. }
  18. .header .search {
  19.     flex: 6;
  20.     padding: 0.5rem;
  21.     background-color: #fff;
  22.     border-radius: 3rem;
  23.     display: flex;
  24. }
  26. /* logo  */
  27. .header .search .logo {
  28.     color: #e43130;
  29.     flex: 0 1 4rem;
  30.     font-size: 2rem;
  31.     /* 水平垂直居中 */
  32.     text-align: center;
  33.     line-height: 2rem;
  34. }
  35. /* 放大镜 */
  36. .header .search .zoom {
  37.     color: #ccc;
  38.     flex: 0 1 4rem;
  39.     border-left: 1px solid;
  40.      /* 水平垂直居中 */
  41.       text-align: center;
  42.     line-height: 2rem;
  43. }
  45. /* 搜索文本框 */
  46. .header .search .words {
  47.     flex: auto;
  48.     border: none;
  49.     outline: none;
  50.     color: #aaa;
  51.     text-align: center;
  52. }

footer.css
````.footer {
display: flex;
justify-content: space-around;
align-items: center;
}

上一条：0331作业下一条：php pdo 插入中文出现乱码解决 办法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多