flex项目上的属性

序号属性描述
1flex项目的缩放比例与基准宽度
2align-self单个项目在交叉轴上的对齐方式
3order项目在主轴上排列顺序

代码:

  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: border-box;
  11. }
  12. :root {
  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 #000;
  23. }
  24. /* flex项目样式 flex容器的子元素 */
  25. .container > .item {
  26. width: 10rem;
  27. background-color: lightcyan;
  28. border: 1px solid #000;
  29. }
  30. /* flex属性 */
  31. </style>
  32. </head>
  33. <body>
  34. <div class="container">
  35. <div class="item">item1</div>
  36. <div class="item">item2</div>
  37. <div class="item">item3</div>
  38. <div class="item">item4</div>
  39. </div>
  40. </body>
  41. </html>

flex-grow

项目是否允许放大

  1. /*允许放大*/
  2. flex-grow: 1;

flex-shrink

项目是否允许收缩
页面缩小,项目也随之缩小

  1. /*允许缩小*/
  2. flex-shrink:1;

flex-basis

设置当前项目在主轴上的大小

  1. flex-basis: 15rem;


注意:max-width:优先级大于flex-basis

flex

flex: 放大因子 收缩因子 计算大小

  1. flex:0 0 15rem;
  2. 等效于
  3. flex-grow:0;
  4. flex-shrink:0;
  5. flex-basis:15rem;


flex默认情况

  1. /*禁止放大 允许缩小 当前的固定宽度值*/
  2. flex:0 1 auto;
  3. 等效于:
  4. flex:initial;
  5. 完全的弹性:允许放大与收缩:
  6. flex:1 1 auto;
  7. 等效于:
  8. flex:auto;
  9. 完全失去弹性:禁止放大 收缩 适合pc端:
  10. flex:0 0 auto;
  11. 等效于:
  12. flex:none;
  13. 单值 仅表示是否允许放大
  14. flex:1;
  15. 等效于:
  16. flex:auto;

flex作用于多个元素的时候:
效果:item2是item1和item3盒子宽度的两倍

  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: border-box;
  11. }
  12. :root {
  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 #000;
  23. }
  24. /* flex项目样式 flex容器的子元素 */
  25. .container > .item {
  26. width: 10rem;
  27. background-color: lightcyan;
  28. border: 1px solid #000;
  29. }
  30. .container > .item:first-of-type {
  31. background-color: yellow;
  32. /* flex: 1 1 auto; */
  33. flex: 1;
  34. }
  35. .container > .item:first-of-type + * {
  36. background-color: lightgreen;
  37. flex: 2;
  38. }
  39. .container > .item:last-of-type {
  40. background-color: coral;
  41. flex: 1;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div class="container">
  47. <div class="item">item1</div>
  48. <div class="item">item2</div>
  49. <div class="item">item3</div>
  50. </div>
  51. </body>
  52. </html>

align-self属性

给某个项目设置对齐属性

  1. /* 默认值 拉伸 stretch */
  2. align-self: stretch;
  3. align-self: flex-end;
  4. align-self: flex-start;
  5. align-self: center;

flex是支持定位的

  1. .container {
  2. position: relative;
  3. }
  4. .container > .item:nth-of-type(3) {
  5. position: absolute;
  6. left: 5rem;
  7. }

order

设置项目在主轴上的位置
order=0的情况:

  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>设置项目在主轴上的顺序</title>
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. :root {
  13. font-size: 10px;
  14. }
  15. body {
  16. font-size: 1.6rem;
  17. }
  18. .container {
  19. display: flex;
  20. height: 20rem;
  21. border: 1px solid #000;
  22. }
  23. .container > .item {
  24. width: 10rem;
  25. background-color: lightcyan;
  26. border: 1px solid #000;
  27. order: 0;
  28. }
  29. .item.one {
  30. background-color: #fff;
  31. }
  32. .item.two {
  33. background-color: #ff7;
  34. }
  35. .item.three {
  36. background-color: #9f7;
  37. }
  38. .item.four {
  39. background-color: #897;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div class="container">
  45. <div class="item one">item1</div>
  46. <div class="item two">item2</div>
  47. <div class="item three">item3</div>
  48. <div class="item four">item4</div>
  49. </div>
  50. </body>
  51. </html>


order是谁小谁靠前:

  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>设置项目在主轴上的顺序</title>
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. :root {
  13. font-size: 10px;
  14. }
  15. body {
  16. font-size: 1.6rem;
  17. }
  18. .container {
  19. display: flex;
  20. height: 20rem;
  21. border: 1px solid #000;
  22. }
  23. .container > .item {
  24. width: 10rem;
  25. background-color: lightcyan;
  26. border: 1px solid #000;
  27. order: 0;
  28. }
  29. .item.one {
  30. background-color: #fff;
  31. order: 4;
  32. }
  33. .item.two {
  34. background-color: #ff7;
  35. order: 3;
  36. }
  37. .item.three {
  38. background-color: #9f7;
  39. order: 1;
  40. }
  41. .item.four {
  42. background-color: #897;
  43. order: 2;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div class="container">
  49. <div class="item one">item1</div>
  50. <div class="item two">item2</div>
  51. <div class="item three">item3</div>
  52. <div class="item four">item4</div>
  53. </div>
  54. </body>
  55. </html>

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

html:

  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. <link rel="stylesheet" href="static/css/index.css" />
  8. <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  9. <link rel="stylesheet" href="static/css/header.css" />
  10. <link rel="stylesheet" href="static/css/footer.css" />
  11. <title>页脚</title>
  12. </head>
  13. <body>
  14. <div class="header">
  15. <!-- 菜单 -->
  16. <div class="menu iconfont icon-menu"></div>
  17. <!-- 搜索框 -->
  18. <div class="search">
  19. <div class="logo">JD</div>
  20. <div class="zoom iconfont icon-search"></div>
  21. <input type="text" class="words" value="移动硬盘5000g" id="" />
  22. </div>
  23. <!-- 登录按钮 -->
  24. <a href="" class="login">登录</a>
  25. </div>
  26. <!-- 主体 -->
  27. <div class="main">main</div>
  28. <!-- 页脚 -->
  29. <div class="footer">
  30. <div>
  31. <div class="iconfont icon-home"></div>
  32. <span>首页</span>
  33. </div>
  34. <div>
  35. <div class="iconfont icon-home"></div>
  36. <span>分类</span>
  37. </div>
  38. <div>
  39. <div class="iconfont icon-home"></div>
  40. <span>京喜</span>
  41. </div>
  42. <div>
  43. <div class="iconfont icon-home"></div>
  44. <span>购物车</span>
  45. </div>
  46. <div>
  47. <div class="iconfont icon-home"></div>
  48. <span>未登录</span>
  49. </div>
  50. </div>
  51. </body>
  52. </html>

reset.css

  1. * {
  2. margin: 0px;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. li {
  7. /* 去掉前面的点 */
  8. list-style: none;
  9. }
  10. a {
  11. /* 去掉下划线 */
  12. text-decoration: none;
  13. color: #7b7b7b;
  14. }
  15. body {
  16. background-color: #f6f6f6;
  17. }
  18. html {
  19. font-size: 10px;
  20. }
  21. body {
  22. font-size: 1.6rem;
  23. }
  24. @media screen and (min-width: 480px) {
  25. html {
  26. font-size: 12px;
  27. }
  28. }
  29. @media screen and (min-width: 640px) {
  30. html {
  31. font-size: 14px;
  32. }
  33. }
  34. @media screen and (min-width: 720px) {
  35. html {
  36. font-size: 16px;
  37. }
  38. }

index.css

  1. /* @import url("reset.css"); */
  2. @import "reset.css";
  3. .header {
  4. background-color: #e43130;
  5. color: #fff;
  6. height: 4.4rem;
  7. /* 固定定位 */
  8. position: fixed;
  9. left: 0;
  10. top: 0;
  11. right: 0;
  12. /* 保证他始终在视口的最前面 */
  13. z-index: 100;
  14. }
  15. /* 主体绝对定位 */
  16. .main {
  17. position: absolute;
  18. top: 4.4rem;
  19. left: 0;
  20. right: 0;
  21. bottom: 4.4rem;
  22. }
  23. .footer {
  24. background-color: #666;
  25. color: #fff;
  26. height: 4.4rem;
  27. /* 固定定位 */
  28. position: fixed;
  29. left: 0;
  30. bottom: 0;
  31. right: 0;
  32. z-index: 100;
  33. }

header.css

  1. /* 使用一个类作为入口,后面可以使用class或伪类来获取内部的每一个元素。 */
  2. .header {
  3. display: flex;
  4. flex-flow: row nowrap;
  5. align-items: center;
  6. }
  7. .header .menu {
  8. flex: 1;
  9. /* 行内元素 文本居中 */
  10. text-align: center;
  11. font-size: 2.5rem;
  12. }
  13. .header .login {
  14. flex: 1;
  15. color: white;
  16. text-align: center;
  17. }
  18. .header .search {
  19. flex: 6;
  20. padding: 0.5rem;
  21. background-color: #fff;
  22. /* 圆角 */
  23. border-radius: 3rem;
  24. display: flex;
  25. }
  26. .header .search .logo {
  27. color: #e43130;
  28. font-size: 2rem;
  29. flex: 0 1 4rem;
  30. text-align: center;
  31. line-height: 2rem;
  32. }
  33. .header .search .zoom {
  34. color: #ccc;
  35. flex: 0 1 4rem;
  36. text-align: center;
  37. /* 垂直居中 */
  38. line-height: 2rem;
  39. border-left: 1px solid;
  40. }
  41. .header .search .words {
  42. flex: auto;
  43. border: none;
  44. outline: none;
  45. color: #aaa;
  46. }

footer.css

  1. .footer {
  2. display: flex;
  3. justify-content: space-around;
  4. align-items: center;
  5. color: #888;
  6. }
  7. /* flex支持嵌套布局 */
  8. /* flex的项目可以又是一个flex容器 */
  9. .footer > div {
  10. display: flex;
  11. flex-flow: column nowrap;
  12. /* 主轴垂直 交叉轴就是水平 */
  13. align-items: center;
  14. }
  15. .footer > div.iconfont {
  16. font-size: 2rem;
  17. }
  18. .footer > div > span {
  19. font-size: 1rem;
  20. }
  21. .footer > div:hover {
  22. cursor: pointer;
  23. }

效果图:

更多相关文章

  1. 移动商城首页的页眉和页脚的布局和flex项目三个属性
  2. 【案例】学习flex项目上的三个属性并尝试制作移动端京东首页
  3. flex项目上的三个属性
  4. 程序员被拖欠工资,怒将项目开源!居然登上GitHub TOP1。
  5. 登顶GitHub大热项目 | 非监督GAN算法U-GAT-IT大幅改进图像转换
  6. 前端基础设施-封装项目路由模块
  7. 本周AI开源项目精选 | 时间序列预测模型、用于对图像进行自我监
  8. 开源项目,动作识别的开源框架Sense + 多对象目标跟踪神器火热出炉
  9. PyTorch入门到进阶 实战计算机视觉与自然语言处理项目

随机推荐

  1. Mars《Android开发视频教程》全集下载(第
  2. 详细Android Studio + NDK范例
  3. 如何扩大一个view的touch和click响应区域
  4. HttpURLConnection(java.net.CookieManage
  5. Android如何判断手机卡是SIM卡或者USIM卡
  6. 简单介绍Android应用特色及详解四大组件
  7. 什么在Android M中被弃用?
  8. Android 3.2 以上转屏,切换屏幕,横竖屏(onC
  9. Android-SurfaceView拍照录像
  10. ListView的上拉弹簧、下拉弹簧,下拉弹簧时