微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > Flex项目属性和PC端响应式页面
博主信息
博文 54
粉丝 6
评论 31
访问量 126517
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Flex项目属性和PC端响应式页面
吾逍遥
原创
1398人浏览过

一、Flex项目属性

Flex属性分为容器属性和项目属性两大类，容器属性探讨见https://www.php.cn/blog/detail/24616.html，

1、项目属性一:flex(项目最重要的属性)

  • 只能用在项目中, 不能用在容器中
  • 语法格式: 放大因子 收缩因子 基准宽度 ,对应的英文flex-grow flex-shrink flex-basis。
  • 默认项目不放大,可收缩,宽度以width为准,即flex:0 1 auto或flex:initial
  • flex-grow放大因子: 取值范围是大于或等于0的正数，0表示不放大，其它正数则表示分配剩余空间时它占的比例 。即所有项目放大之和为总的份数，它对应整个剩余空间，该项目的放大因子就是自己所占的份，除以总份数则乘以剩余空间就是它分配的大小。
  • flex-shrink缩小因子: 取值范围同放大，0也表示不缩小，其它正数则表示缩小的比例。和放大不同的是分配的整体缩小空间的比例。
  • flex-basis基准宽度: 取值可以是绝对值、相对值、百分比和auto，auto时宽度为项目的宽度。若有值则覆盖项目的width 。
  • min-width和max-width min-width限制了缩小的尺寸，而max-width则限制了放大的尺寸。

语法分类:
1.三值语法 就是语法中三个值都有，第一个放大比例，第二个缩小比例，第三个基准宽度。
如:flex:1 1 100px;
2.二值语法 第一个值永远是放大因子, 区别在于第二个值:第二个值是一个没有单位的,表示”收缩因子”flex-shrink，若是百分比或有单位,则表示”基准宽度” /
如:flex: 1 3; 表示放大占1份，缩小放占3份
如:flex: 0 30%; 表示不放大，基准宽度为30%
*3、单值语法 最常用的,必须掌握

  • 无单位，表示放大因子 如flex:1，flex：3
  • 有效的宽度，表示基准宽度,此时放大因子和缩小因子默认为1 如flex:100px,flex:30%
  • 关键字，表示三值语法的简称 如flex:initial等于flex:0 1 auto，flex；auto则等于flex:1 1 auto。
  1. <style>
  2.     .box{
  3.         /* flex:0 1 auto; */
  4.         /* flex:initial */
  5.         /* flex:1 1 auto； */
  6.         /* flex:auto; */
  7.         /* flex:1 100px; */
  8.         flex:1;
  9.     }
  11. </style>
  12. <div class="container">
  13.     <div class="box">1</div>
  14.     <div class="box">2</div>
  15.     <div class="box">3</div>
  16. </div>

2、项目属性二:order(项目排序)

项目排序在flex的容器属性中flex-direction中只定义两种： 正序和逆序 。而项目的order则可以指定项目的任意排序 。

排序注意事项:

  • order取值是整数 ,正整数和负整数均可以,默认值为0。
  • order值越小越靠近起始线 ， 越大越靠近终止线 。
  • order相等时则按项目源码顺序排序 。
  • 起始线和终止线是随着flex-direction变化的。具体见下表
flex方向 起始线 终止线
row 左 右
row-reverse 右 左
column 上 下
column-reverse 下 上 
  1. .container .box:first-child{ order:0; }
  2. .container .box:nth-child(2){ order:-1; }
  3. .container .box:last-child{ order:2; }

flex-order

3、项目属性三:align-self

align-self设置某个项目在交叉轴上的对齐方式,而align-items则设置主轴方向上一行所有项目在交叉轴的对齐方式。取值和意思同align-items。比较简单就不再细说了。

二、flex实现PC端的响应式页面

实现目标:

  1. flex布局，适应PC、平板和手机
  2. 导航栏根据尺寸调整两种状态
  1. <style>
  2. /* 清除样式 */
  3. * {
  4. margin: 0;
  5. padding: 0;
  6. border: none;
  7. outline: none;
  8. box-sizing: border-box;
  9. }
  10. a {
  11. text-decoration: none;
  12. color: #666;
  13. }
  14. li {
  15. list-style: none;
  16. }
  18. /* 定义基本样式 */
  19. .container {
  20. width: 100vw;
  21. height: 100vh;
  22. color: #666;
  23. }
  24. #header {
  25. position: fixed;
  26. width: 100%;
  27. height: 80px;
  28. line-height: 80px;
  29. color: white;
  30. background-color: rgba(0, 202, 175, 0.75);
  31. transition: height 0.3s ease-in;
  33. display: flex;
  34. justify-content: space-around;
  35. align-items: center;
  36. }
  38. .nav {
  39. min-width: 60vw;
  40. height: 100%;
  41. display: flex;
  42. justify-content: space-evenly;
  43. text-align: center;
  45. font-size: 1.1em;
  46. }
  48. .nav li a {
  49. color: white;
  50. }
  52. .topRight {
  53. height: 100%;
  54. display: flex;
  55. justify-content: space-around;
  56. align-items: center;
  57. }
  58. .topMenu {
  59. visibility: hidden;
  60. width: 36px;
  61. height: 36px;
  62. border-radius: 5px;
  63. background-color: white;
  64. margin-left: 0.5em;
  66. display: flex;
  67. flex-flow: column;
  68. justify-content: space-evenly;
  69. align-items: center;
  70. }
  72. .topMenu span {
  73. width: 80%;
  74. height: 3px;
  75. background-color: rgb(0, 202, 175);
  76. }
  78. .closeMenu {
  79. display: none;
  80. }
  82. .closeMenu span:first-child {
  83. margin-top: 3px;
  84. transform: rotate(45deg);
  85. }
  86. .closeMenu span:last-child {
  87. margin-top: -18px;
  88. transform: rotate(-45deg);
  89. }
  91. /* 主体区 */
  92. /* 图片使用vmax效果非常好 */
  93. .banner > img {
  94. width: 100%;
  95. height: 30vmax;
  96. }
  97. .content{
  98.     display: flex;
  99.     flex-flow: column nowrap;
  100.     align-items: center;
  101. }
  102. .content h2{
  103.     font-size: 2em;
  104. }
  105. .content h2::before{
  106.     content:'-----     ';
  107. }
  108. .content h2::after{
  109.     content:'   -------';
  110. }
  111. .content .goods{
  112.     margin-top: 2em;
  113.     width: 100%;
  114.     display: flex; 
  115.     flex-flow: row wrap;
  116.     justify-content: space-evenly;         
  117. }
  118. .goods a{
  119.     flex:0 1 20vw;
  120.     text-align: center;
  121.     padding: 1em 2em;
  122.     background-color: #eee;
  123.     box-shadow: 1px 1px 3px black;
  124.     margin-bottom: 1em;
  125. }
  127. /* 页脚 */
  128. footer {
  129. display: flex;
  130. flex-flow: column nowrap;
  131. text-align: center;
  132. background-color:#333;
  134. }
  136. /* 媒人查询实现响应式 */
  137. @media screen and (min-width: 800px) {
  138. .nav li {
  139.     flex: 1 1 auto;
  140.     height: 100%;
  141.     border-bottom: 1px solid transparent;
  142. }
  143. .nav li a {
  144.     padding: 0.5em 1em;
  145.     border-radius: 0.5em;
  146. }
  147. .nav li:hover a {
  148.     background-color: whitesmoke;
  149.     color: #007d20;
  150. }
  151. .nav li:hover {
  152.     border-bottom-color: red;
  153. }
  154. }
  156. @media screen and (max-width: 800px) {
  157. #header {
  158.     justify-content: space-between;
  159.     height: 58px;
  160.     line-height: 58px;
  161.     padding: 0 1em;
  162. }
  163. .nav {
  164.     display: none;
  165.     position: fixed;
  166.     left: 0;
  167.     top: 58px;
  168.     bottom: 0;
  169.     min-width: 30vw;
  170.     background-color: rgba(0, 202, 175, 0.75);
  171.     transition: width 0.3s ease-in;
  173.     flex-flow: column nowrap;
  174.     justify-content: initial;
  175. }
  176. .nav li {
  177.     flex: initial;
  178. }
  179. .nav li a {
  180.     padding: initial;
  181. }
  182. .topMenu {
  183.     visibility: visible;
  184. }
  185. .nav li:hover a {
  186.     color: #007d20;
  187. }
  188. .nav li:hover {
  189.     background-color: white;
  190. }
  191. }
  193. /* target核心代码 */
  194. #header:target .nav {
  195. display: flex;
  196. }
  198. #header:target .openMenu {
  199. display: none;
  200. }
  202. #header:target .closeMenu {
  203. display: inline-flex;
  204. }
  205. </style>
  206. <div class="container">
  207.     <!-- 顶部 -->
  208.     <header id="header">
  209.     <h2>PC响应式页面</h2>
  210.     <ul class="nav">
  211.         <li><a href="">首页</a></li>
  212.         <li><a href="">关于我们</a></li>
  213.         <li><a href="">最新要闻</a></li>
  214.         <li><a href="">加入我们</a></li>
  215.     </ul>
  216.     <div class="topRight">
  217.         <a class="topMenu openMenu" href="#header">
  218.         <span></span>
  219.         <span></span>
  220.         <span></span>
  221.         </a>
  222.         <a class="topMenu closeMenu" href="#">
  223.         <span></span>
  224.         <span></span>
  225.         </a>
  226.     </div>
  227.     </header>
  229.     <!-- 主体区 -->
  230.     <div class="main">
  231.     <div class="banner">
  232.         <img src="../static/banner_img.jpg" alt="轮播图" />
  233.     </div>
  234.     <div class="content">
  235.         <h2>热销商品</h2>
  236.         <div class="goods">
  237.         <a href=""><img src="../static/goods1.jpg" alt=""></a>
  238.         <a href=""><img src="../static/goods2.jpg" alt=""></a>
  239.         <a href=""><img src="../static/goods3.jpg" alt=""></a>
  240.         </div>
  241.     </div>
  242.     </div>
  244.     <!-- 底部 -->
  245.     <footer>
  246.     <p>
  247.         php中文网&copy;版权所有(2015-2022) | 备案号:
  248.         <a href="">皖ICP-150********</a>
  249.     </p>
  250.     <p>中国.合肥政务新区置地广场 | 电话: 0551-888999**</p>
  251.     </footer>
  252. </div>

由于演示gif较大，上传到图床了。如果看不了演示，可自己复制上面代码进行测试
flex-pc

Codepen演示 https://codepen.io/woxiaoyao81/pen/eYzVLOG

三、学习的总结

  • flex盒子其实将所有 “子元素” 转换成BFC式行内块进行排版布局。它属于一维布局。非常适合一行或一列的排版。后面要学的grid则相当于flex和table二者结合，在二维空间进行布局。
  • 布局中为了渐变效果要使用transition，以后我准备总结，其实入门比较简单
  • 上面PC端布局中使用伪类:target和:not实现菜单点击弹出侧边栏效果，是CSS3新增加的特性，本想使用JS实现，但没学，结果在CSS3中找到方法，它同样适用于tab标签、显示隐藏圣诞框等，具体可见我的博文https://www.php.cn/blog/detail/24645.html
  • 另个布局中页面元素经常要居中，我对它进行了梳理总结，可以看我的博文https://www.php.cn/blog/detail/24646.html
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：flex布局,非常适合一维布局,就是元素朝一个方向排列时, 非常方便, grid是二维布局, 可以在行与列二个方向上同步进行, 香不香?
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
1条评论
吾逍遥 2020-10-29 18:42:22
很香，尤其是适用bootstrap后，再开发小程序或APP去适就flex还是有点难受，现在有明师引路，flex和grid掌握都不在话下
1楼
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录