登录  /  注册
博主信息
博文 14
粉丝 0
评论 2
访问量 12092
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
PC 和移动端 flex 通用布局解决方案
JKY辉哥
原创
995人浏览过
  • 1.flex 布局 常用属性

    • 声明flexBox容器
      display: flex;

    • 主轴方向:默认行方向
      flex-direction: row;

    • 主轴上的项目是否换行
      flex-wrap: nowrap/wrap;

    • 简写:flex-flow:flex-direction flex-wrap;
      flex-flow: row nowrap;

    • 当主轴上存在剩余空间时,控制空间在项目上的分配方案
      justify-content: flex-start;
      justify-content:flex-end;
      justify-content:center;

    • 仅适用于多行容器,控制项目的对齐方式
      align-content: flex-start;
      align-content: flex-end;
      align-content: center;

    • 控制所有项目在交叉轴上的对齐方式:
      align-items: stretch;默认值
      align-items: flex-start/center/flex-end

    • 设置项目在主轴空间上的增长因子:flex-grow: 2

      1. .container > .item:first-of-type {
      2. /* 第一个增长因子2,第2个和第3个是1,增长因子之和: 2 + 1 + 1 = 4 */
      3. /* 120 / 增长因子之和4 = 30px */
      4. flex-grow: 2;
      5. flex-grow: 0.5;
      6. /* 增长因子和: 0.5 + 1 + 1 = 2.5 */
      7. /* 120px / 2.5 = 48px */
      8. /* 第2个,第3个: 108px */
      9. /* 第1个最终是84px */ }
    • 设置项目在主轴空间上的收缩因子:flex-shrink: 1;

      1. .container > .item {
      2. /* 收缩因子有效的前提是, 所有项目宽度之和必须大于主轴上的当前空间大小 */
      3. width: 160px;
      4. /* 不收缩 */
      5. flex-shrink: 0;
      6. /* 收缩,默认值是1,允许收缩填充主轴全部空间 */
      7. /* 收缩因子之和:  1 + 1 +1 = 3 */
      8. /* 180 / 3 = 60,每个项目需要消化掉60 */
      9. flex-shrink: 1; }
      10. 收缩因子是小数,例如0.5,必须单独给项目设置
      11. .container > .item:first-of-type {
      12. /* 收缩因子之和: 0.5 + 1 + 1 = 2.5 */
      13. /* 180px / 2.5 = 72px */
      14. /* 第一个项目: 160 - (72*0.5) = 124px */
      15. /* 第二个项目, 第三个项目: 160 -72 = 88px */
      16. flex-shrink: 0.5;}
    • 设置项目在主轴空间上的收缩因子尺寸规则:初始大小 < 基础尺寸 < 最小宽度

      1. .container > .item {
      2. /* 原始大小,初始大小 */
      3. width: 60px;
      4. /* 基础尺寸优先级大于原始大小 */
      5. flex-basis: 80px;
      6. width: 60px;
      7. /* 最小宽度优先级又大于基础尺寸 */
      8. min-width: 100px; }
    • 增长因子,收缩因子,基础尺寸属性的简写

      1. .container > .item {
      2. width: 60px;
      3. /* flex:放大因子 收缩因子 基础尺寸 */
      4. /* 默认不放大,可收缩,尺寸使用原始大小 */
      5. flex: 0 1 auto;;
      6. /*最常用写法:可放大、可收缩、尺寸自动 */
      7. flex: 1 1 auto;
      8. /* 等价于 */
      9. flex: 1;
      10. flex: auto;
      11. /* 禁止放大和收缩,保存原样 */
      12. flex: 0 0 auto;
      13. flex: none;
      14. /* 恢复原始尺寸 */
      15. /* flex: 0; */
      16. /* 等价于 */
      17. flex: 0 0 0%;
      18. /* 记住常用的值:0,1,auto用法 */
      19. /* 0:全部失效
      20. 1:全部有效
      21. auto:可放大、可缩小、基础尺寸自动计算*/ }
  • 2.PC 端布局的通用解决方案

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>PC端布局的通用解决方案</title>
  7. <style>
  8. /* 初始化 */
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. a {
  15. color: #666;
  16. text-decoration: none;
  17. }
  18. /* 将body转为flex */
  19. body {
  20. min-width: 680px;
  21. display: flex;
  22. /* 主轴垂直方向,不换行 */
  23. flex-flow: column nowrap;
  24. }
  25. header,
  26. footer {
  27. height: 50px;
  28. border: solid 1px #000;
  29. }
  30. /* 将页眉转为flex */
  31. header {
  32. display: flex;
  33. /* 所有项目在交叉轴方向居中显示 */
  34. align-items: center;
  35. }
  36. header > a {
  37. /* 给每个弹性项目,禁止放大,允许收缩,尺寸给100px */
  38. flex: 0 1 100px;
  39. /* 文本在当前项目中居中 */
  40. text-align: center;
  41. }
  42. /* 设置 LOGO */
  43. header > a:first-of-type {
  44. margin-right: 50px;
  45. }
  46. header > a img:first-of-type {
  47. width: 100%;
  48. height: auto;
  49. padding-left: 20px;
  50. }
  51. header > a:last-of-type {
  52. margin-left: auto;
  53. }
  54. /* 设置鼠标悬停效果,并忽略LOGO */
  55. header > a:hover:not(:first-of-type) {
  56. color: coral;
  57. }
  58. .container {
  59. display: flex;
  60. min-height: 400px;
  61. /* flex-grow: row nowrap; 默认值*/
  62. margin: 10px auto;
  63. justify-content: center;
  64. }
  65. .container > aside,
  66. .container > main {
  67. border: 1px solid #000;
  68. padding: 10px;
  69. }
  70. .container > aside {
  71. flex: 0 0 200px;
  72. }
  73. .container > aside > h2 {
  74. color: #5184eb;
  75. }
  76. .container > aside > ul {
  77. }
  78. .container > aside > ul li {
  79. list-style: none;
  80. padding: 5px 0px;
  81. line-height: 24px;
  82. text-decoration: grey;
  83. /* 单行文本不换行多余文本显示省略号 */
  84. width: 200px;
  85. white-space: nowrap;
  86. overflow: hidden;
  87. text-overflow: ellipsis;
  88. }
  89. .container > aside > ul li a {
  90. color: gray;
  91. font-size: 14px;
  92. word-wrap: break-word;
  93. word-break: normal;
  94. }
  95. .container > aside > ul li a:hover {
  96. color: #5184eb;
  97. }
  98. .container > main {
  99. flex: 0 0 600px;
  100. margin: 0px 10px;
  101. }
  102. footer {
  103. display: flex;
  104. flex-flow: column nowrap;
  105. text-align: center;
  106. }
  107. </style>
  108. </head>
  109. <body>
  110. <!-- 页眉 -->
  111. <header>
  112. <a href="#"><img src="./static//images/new_logo.png" /></a>
  113. <a href="#">要闻</a>
  114. <a href="#">抗肺炎</a>
  115. <a href="#">北京</a>
  116. <a href="#">娱乐</a>
  117. <a href="#">登录/注册</a>
  118. </header>
  119. <!-- 主体 -->
  120. <div class="container">
  121. <!-- 左边栏 -->
  122. <aside>
  123. <h2>热点精选</h2>
  124. <ul>
  125. <li>
  126. <a href="" alt=""
  127. >著名电影表演艺术家于蓝逝世享年99岁 曾塑造“江姐”等经典形象</a
  128. >
  129. </li>
  130. <li>
  131. <a href="" alt=""
  132. >武汉和北京都采用了所谓的混检方法 这种方法可靠吗?</a
  133. >
  134. </li>
  135. <li>
  136. <a href="" alt="">章莹颖案民事诉讼再遭驳回:法官称心理顾问无责</a>
  137. </li>
  138. <li>
  139. <a href="" alt=""
  140. >著名电影表演艺术家于蓝逝世享年99岁 曾塑造“江姐”等经典形象</a
  141. >
  142. </li>
  143. <li>
  144. <a href="" alt=""
  145. >武汉和北京都采用了所谓的混检方法 这种方法可靠吗?</a
  146. >
  147. </li>
  148. <li>
  149. <a href="" alt="">章莹颖案民事诉讼再遭驳回:法官称心理顾问无责</a>
  150. </li>
  151. <li>
  152. <a href="" alt=""
  153. >著名电影表演艺术家于蓝逝世享年99岁 曾塑造“江姐”等经典形象</a
  154. >
  155. </li>
  156. <li>
  157. <a href="" alt=""
  158. >武汉和北京都采用了所谓的混检方法 这种方法可靠吗?</a
  159. >
  160. </li>
  161. <li>
  162. <a href="" alt="">章莹颖案民事诉讼再遭驳回:法官称心理顾问无责</a>
  163. </li>
  164. </ul>
  165. </aside>
  166. <!-- 主体内容区 -->
  167. <main>
  168. <h2>武汉和北京都采用了所谓的混检方法 这种方法可靠吗?</h2>
  169. <p>
  170. 混检大幅提升了核酸检测能力,比如,现在北京的日检测能力是20多万,使用这种结合模式,可使日检测能力在不增加人力物力的情况下,就可以达到200多万。
  171. 新京报快讯
  172. 据国家卫健委官方微博消息,“混检”有两种模式。一种是在采样时,将几个人如3人或5人分别采样后,放至同一采样管中,这种模式也叫做“混合采样”或称“混采”,北京多数情况下采用这种模式;另一种则是在实验室检测时,将3人或5人的样本取相同体积混合在一起,也称“样本混合“。
  173. 从科学角度讲,第一种“混采”模式,不会影响核酸检测的敏感性,后一种将样本混合检测的模式,则对检测敏感性有一定的影响,但影响程度是已知的。
  174. 在现场采样中,如采用“混采”,要注意的是有序安排,如5人一组,每人持各自的条码,采样时每采一人,将该人条码贴至采样管上,这样就可有效地避免采样可能弄混的问题。
  175. 分析过程中,如采用“样本混合”的混检方案,在混合5人样本时,也要注意样本混合过程中,可能存在的样本弄混问题。
  176. 混检大幅提升了核酸检测能力,比如,现在北京的日检测能力是20多万,使用这种结合模式,可使日检测能力在不增加人力物力的情况下,就可以达到200多万。
  177. 需要强调的是,对于发热门诊有症状患者、密切接触者等高风险人群检测,还是应该采用单采单检。对于低风险人群的筛查,则可以优先选择“混检”。
  178. </p>
  179. </main>
  180. <!-- 右边栏 -->
  181. <aside>
  182. <h2>今日话题</h2>
  183. <ul>
  184. <li>
  185. <a href="" alt="">希腊红灯区重开,嫖客只能在房间呆15分钟?假消息</a>
  186. </li>
  187. <li>
  188. <a href="" alt="">希腊红灯区重开,嫖客只能在房间呆15分钟?假消息</a>
  189. </li>
  190. <li>
  191. <a href="" alt="">希腊红灯区重开,嫖客只能在房间呆15分钟?假消息</a>
  192. </li>
  193. </ul>
  194. </aside>
  195. </div>
  196. <!-- 页脚 -->
  197. <footer>
  198. <p>
  199. php中文网 ©版权所有 (2018-2022) | 备案号:
  200. <a href="">皖ICP-18********</a>
  201. </p>
  202. <p>中国.合肥市政务新区999号 | 电话: 0551-888999**</p>
  203. </footer>
  204. </body>
  205. </html>

pc 端解决方案:pc

  • 3.移动端的解决方案

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>移动端的解决方案</title>
  7. <link rel="stylesheet" href="static/css/font-icon.css" />
  8. <style>
  9. /* 样式初始化 */
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. box-sizing: border-box;
  14. }
  15. a {
  16. color: #666;
  17. text-decoration: none;
  18. }
  19. html {
  20. /* vw: 可视区宽度,100指100份 */
  21. /* vh:可视区的高度,100指100份 */
  22. width: 100vw;
  23. height: 100vh;
  24. font-size: 14px;
  25. color: #666;
  26. }
  27. body {
  28. /* 设置最小宽度 */
  29. min-width: 360px;
  30. background-color: #fff;
  31. display: flex;
  32. flex-flow: column nowrap;
  33. }
  34. body > header {
  35. color: white;
  36. background-color: #333;
  37. height: 30px;
  38. display: flex;
  39. align-items: center;
  40. justify-content: space-between;
  41. position: fixed;
  42. width: 100vw;
  43. padding: 0 15px;
  44. }
  45. body > .slider {
  46. height: 180px;
  47. }
  48. body > .slider > img {
  49. /* width: 100%; */
  50. height: 100%;
  51. }
  52. /* 主导航区 */
  53. nav {
  54. height: 200px;
  55. margin-bottom: 10px;
  56. display: flex;
  57. /* 转为多行容器 */
  58. flex-flow: row wrap;
  59. align-content: space-around;
  60. }
  61. nav div {
  62. width: 25%;
  63. display: flex;
  64. flex-flow: column nowrap;
  65. align-items: center;
  66. }
  67. nav > div > a:first-of-type {
  68. text-align: center;
  69. }
  70. nav > div img {
  71. width: 50%;
  72. }
  73. .hostgoods {
  74. padding-left: 20px;
  75. }
  76. /* 每个区域标题样式 */
  77. .title {
  78. margin-top: 10px;
  79. font-size: 1.2rem;
  80. font-weight: normal;
  81. text-align: center;
  82. }
  83. /* 热销商品区 */
  84. .hot-goods {
  85. border-top: 1px solid #cdcdcd;
  86. margin-top: 10px;
  87. font-size: 0.8rem;
  88. display: flex;
  89. /* 水平多行容器 */
  90. flex-flow: row wrap;
  91. }
  92. .hot-goods img {
  93. width: 100%;
  94. }
  95. .hot-goods > .goods-img {
  96. /* 内边距重置大小 */
  97. padding: 10px;
  98. box-sizing: border-box;
  99. /* 允许放大不允许缩小,否则项目不会换行,多行容器失效 */
  100. flex: 1 0 30vw;
  101. /* 再将每个商品描述转为flex */
  102. display: flex;
  103. /* 主轴垂直且不允许换行 */
  104. flex-flow: column nowrap;
  105. justify-content: center;
  106. }
  107. /* 商品描述的最后一个区域转flex,并设置项目在主轴上排列对齐方式 */
  108. .hot-goods > .goods-img > div {
  109. display: flex;
  110. /* 分散对齐 */
  111. justify-content: space-around;
  112. }
  113. /* 热销样式 */
  114. .hot {
  115. color: coral;
  116. }
  117. /* 商品列表 */
  118. .list-goods {
  119. padding: 10px;
  120. border-top: 1px solid #cdcdcd;
  121. margin-top: 10px;
  122. font-size: 0.8rem;
  123. display: flex;
  124. /* 主轴必须垂直 */
  125. flex-flow: column nowrap;
  126. }
  127. /* 每个项目也转为flex */
  128. .list-goods > .goods-desc {
  129. margin: 10px 0;
  130. display: flex;
  131. }
  132. /* 列表中每个项目的样式,加些间距 */
  133. .list-goods > .goods-desc > a {
  134. padding: 10px;
  135. box-sizing: border-box;
  136. }
  137. .list-goods > .goods-desc > a:last-of-type:hover {
  138. color: lightseagreen;
  139. }
  140. /* 图片全部适应项目空间 */
  141. .list-goods img {
  142. width: 100%;
  143. }
  144. body > footer {
  145. color: #666;
  146. background-color: #efefef;
  147. border-top: 1px solid #ccc;
  148. height: 55px;
  149. position: fixed;
  150. bottom: 0;
  151. width: 100vw;
  152. display: flex;
  153. justify-content: space-evenly;
  154. padding-bottom: 100px;
  155. }
  156. body > footer a {
  157. margin-top: 10px;
  158. font-size: 0.8rem;
  159. display: flex;
  160. /* 垂直排列不换行 */
  161. flex-flow: column nowrap;
  162. /* 交叉轴项目居中显示 */
  163. align-items: center;
  164. }
  165. body > footer a > span:first-of-type {
  166. /* 图标字体设置大一些 */
  167. font-size: 1.6rem;
  168. }
  169. </style>
  170. </head>
  171. <body>
  172. <!-- 页眉 -->
  173. <header>
  174. <a href="">LOGO</a>
  175. <span class="iconfont"></span>
  176. </header>
  177. <!-- 轮播图 -->
  178. <div class="slider">
  179. <img src="static/images/banner.jpg" alt="banner" />
  180. </div>
  181. <!-- 主导航区 -->
  182. <nav>
  183. <div>
  184. <a href=""><img src="static/images/link1.webp"</a>
  185. <a href="">京东超市</a>
  186. </div>
  187. <div>
  188. <a href=""><img src="static/images/link2.webp" alt="" /></a>
  189. <a href="">服装百货</a>
  190. </div>
  191. <div>
  192. <a href=""><img src="static/images/link3.webp" alt="" /></a>
  193. <a href="">数码精品</a>
  194. </div>
  195. <div>
  196. <a href=""><img src="static/images/link4.webp" alt="" /></a>
  197. <a href="">优惠劵</a>
  198. </div>
  199. <div>
  200. <a href=""><img src="static/images/link1.webp" alt="" /></a>
  201. <a href="">超市精选</a>
  202. </div>
  203. <div>
  204. <a href=""><img src="static/images/link2.webp" alt="" /></a>
  205. <a href="">服装百货</a>
  206. </div>
  207. <div>
  208. <a href=""><img src="static/images/link3.webp" alt="" /></a>
  209. <a href="">数码精品</a>
  210. </div>
  211. <div>
  212. <a href=""><img src="static/images/link4.webp" alt="" /></a>
  213. <a href="">优惠劵</a>
  214. </div>
  215. </nav>
  216. <!-- 热销商品 -->
  217. <div class="hostgoods">
  218. <h2>
  219. 热销商品<span class="iconfont hot" style="color: coral;"></span>
  220. </h2>
  221. </div>
  222. <div class="hot-goods">
  223. <div class="goods-img">
  224. <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  225. <p>Apple iPhone 11 128G</p>
  226. <div>
  227. <span>62299 元</span>
  228. <span class="iconfont hot"></span>
  229. </div>
  230. </div>
  231. <div class="goods-img">
  232. <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  233. <p>Apple iPhone X 512G</p>
  234. <div>
  235. <span>8299 元</span>
  236. <span class="iconfont hot"></span>
  237. </div>
  238. </div>
  239. <div class="goods-img">
  240. <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  241. <p>华为笔记本电脑</p>
  242. <div>
  243. <span>5699 元</span>
  244. <span class="iconfont hot"></span>
  245. </div>
  246. </div>
  247. <div class="goods-img">
  248. <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  249. <p>小米笔记本电脑</p>
  250. <div>
  251. <span>3999 元</span>
  252. <span class="iconfont hot"></span>
  253. </div>
  254. </div>
  255. <div class="goods-img">
  256. <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  257. <p>联想笔记本电脑</p>
  258. <div>
  259. <span>4399 元</span>
  260. <span class="iconfont hot"></span>
  261. </div>
  262. </div>
  263. </div>
  264. <!-- 商品列表区 -->
  265. <h2 class="title">
  266. 商品列表<span class="iconfont hot" style="color: coral;"></span>
  267. </h2>
  268. <div class="list-goods">
  269. <div class="goods-desc">
  270. <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  271. <a href=""
  272. >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  273. 今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  274. 以上都是我瞎编的<span
  275. class="iconfont hot"
  276. style="vertical-align: middle;"
  277. ></span
  278. ></a
  279. >
  280. </div>
  281. <div class="goods-desc">
  282. <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  283. <a href=""
  284. >[白条24期免息]Apple洗衣机,专业清洗苹果手机,
  285. 苹果电脑,iPad,洗好保证不能用, 免费领取500元保险费,
  286. 今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  287. 以上都是我瞎编的<span
  288. class="iconfont hot"
  289. style="vertical-align: middle;"
  290. ></span
  291. ></a
  292. >
  293. </div>
  294. <div class="goods-desc">
  295. <a href=""><img src="static/images/goods5.png" alt="" /></a>
  296. <a href=""
  297. >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  298. 今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  299. 以上都是我瞎编的<span
  300. class="iconfont hot"
  301. style="vertical-align: middle;"
  302. ></span
  303. ></a
  304. >
  305. </div>
  306. <div class="goods-desc">
  307. <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  308. <a href=""
  309. >[白条24期免息]华为笔记本MateBook 14 全面屏轻薄性能笔记本电脑
  310. 十代酷睿(i5 16G 512G MX250 触控屏 多屏协同)灰, 以上都是我瞎编的<span
  311. class="iconfont hot"
  312. style="vertical-align: middle;"
  313. ></span
  314. ></a
  315. >
  316. </div>
  317. </div>
  318. <!-- 页脚 -->
  319. <footer>
  320. <a href="">
  321. <span class="iconfont hot"></span>
  322. <span>首页</span>
  323. </a>
  324. <a href="">
  325. <span class="iconfont hot"></span>
  326. <span>分类</span>
  327. </a>
  328. <a href="">
  329. <span class="iconfont hot"></span>
  330. <span>购物车</span>
  331. </a>
  332. <a href="">
  333. <span class="iconfont hot"></span>
  334. <span>未登录</span>
  335. </a>
  336. </footer>
  337. </body>
  338. </html>

wap 端解决方案:wap

  • 4.总结

    • 转为多行容器:flex-flow: row wrap;
    • 垂直排列不换行:flex-flow: column nowrap;
    • 项目对齐方式:justify-content: space-around;
    • 交叉轴项目居中显示:align-items: center;
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:不错, 和我一样喜欢使用缩写, 这是推荐的方式
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学