flex容器以及属性

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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: 2rem;
  17. }
  18. .con {
  19. border: 2px solid;
  20. height: 30rem;
  21. display: flex;
  22. /* 转换为flex容器 ,用属性布局*/
  23. /* 主轴的方向 */
  24. /* flex-direction: row; */
  25. /* 水平方向,起始左端 */
  26. /* flex-direction: row-reverse; */
  27. /* 水平方向,起始右端 */
  28. /* flex-direction: column; */
  29. /* 主轴垂直方向,起始上端 */
  30. /* flex-direction: column-reverse; */
  31. /* 垂直方向,起始下端 */
  32. /* 、、、、、、、、、、、、、、、、、、、、、、、、、、、、 */
  33. /* flex-wrap: wrap; */
  34. /* 可以换行 */
  35. flex-wrap: nowrap;
  36. /* 不换行 */
  37. /* flex-wrap: wrap-reverse; */
  38. /* 可以换行,第一行在下面 */
  39. /* flex-flow: row nowrap; */
  40. /* justify-content: center; */
  41. /* 居中显示项目 */
  42. /* justify-content: flex-start; */
  43. /* 左对齐方式 */
  44. /* justify-content: flex-end; */
  45. /* 右对齐 */
  46. /* justify-content: space-between; */
  47. /* 两端对齐方式 */
  48. /* justify-content: space-around; */
  49. /* 项目两端的距离相等 */
  50. /* align-items: flex-start; */
  51. /* 与交叉轴的起点对齐 */
  52. /* align-items: flex-end; */
  53. /* 与交叉轴的终点对齐 */
  54. /* align-items: center; */
  55. /* 与交叉轴的中点对齐 */
  56. /* align-items: center; */
  57. /* align-items: stretch; */
  58. /* 默认值 */
  59. /* order: 5; */
  60. /* style="order */
  61. /* 数值越小越靠前 */
  62. }
  63. .con > .item {
  64. padding: 3rem;
  65. background-color: rgb(224, 237, 255);
  66. border: 2px solid;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71. <div class="con">
  72. <div class="item">item1</div>
  73. <div class="item">item2</div>
  74. <div class="item">item3</div>
  75. <div class="item" style="order: 3">item4</div>
  76. <div class="item">item5</div>
  77. <div class="item" style="order: 2">item6</div>
  78. <div class="item">item7</div>
  79. </div>
  80. </body>
  81. </html>

更多相关文章

  1. flex容器
  2. flex初体验之常用属性练习
  3. C语言进阶(六)--自定义类型详解(结构体+枚举+联合)
  4. C语言之结构体内存的对齐
  5. flex 容器的 flex-flow, justify-content, align-items, align-c
  6. grid对齐方式与基础实战
  7. CSS中flex布局的属性及应用
  8. CSS:flex布局理解及实例演示flex容器中的四个属性的功能、参数、
  9. C语言实现乘法口诀表

随机推荐

  1. android WebView知识
  2. Android Theme 熟悉的一点点
  3. 好用的Android库
  4. android view事件顺序
  5. Android 基础总结:(一)Android系统架构
  6. 设置提示信息,输入值类型,输入框引入图片,设
  7. Android 4.4环境搭建——Android SDK下载
  8. Android内存分析总结
  9. [原]如何在Android用FFmpeg+SDL2.0解码声
  10. Android UI 用户界面开发基本概念概览