PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

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

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

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>
  16. <body>
  17. <!-- 页眉 -->
  18. <div class="header">
  19. <div class="menu iconfont icon-menu"></div>
  20. <!-- 搜索框 -->
  21. <div class="search">
  22. <div class="logo">JD</div>
  23. <span class="zoom iconfont icon-search"></span>
  24. <input class="words" type="text" value="大吉大利晚上吃鸡" />
  25. </div>
  26. <!-- 登录按钮 -->
  27. <a href="" class="login">登录</a>
  28. </div>
  29. <!-- 主体 -->
  30. <div class="main"></div>
  31. <!-- 页脚 -->
  32. <div class="footer">
  33. <span>主页</span>
  34. <span>分类</span>
  35. <span>京喜</span>
  36. <span>购物车</span>
  37. <span>未登录</span>
  38. </div>
  39. </body>
  40. </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. }
  11. .header .menu {
  12. text-align: center;
  13. flex: 1;
  14. font-size: 2.5rem;
  15. }
  16. .header .search {
  17. flex: 6;
  18. padding: 0.5rem;
  19. background-color: #fff;
  20. border-radius: 3rem;
  21. display: flex;
  22. }
  23. /* logo */
  24. .header .search .logo {
  25. color: #e43130;
  26. flex: 0 1 4rem;
  27. font-size: 2rem;
  28. /* 水平垂直居中 */
  29. text-align: center;
  30. line-height: 2rem;
  31. }
  32. /* 放大镜 */
  33. .header .search .zoom {
  34. color: #ccc;
  35. flex: 0 1 4rem;
  36. border-left: 1px solid;
  37. /* 水平垂直居中 */
  38. text-align: center;
  39. line-height: 2rem;
  40. }
  41. /* 搜索文本框 */
  42. .header .search .words {
  43. flex: auto;
  44. border: none;
  45. outline: none;
  46. color: #aaa;
  47. text-align: center;
  48. }

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议