经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy
来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/9 15:18:23　　对本文有异议

布局小米移动端页面结构：

  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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         body{
  15.             display:flex;
  16.             flex-direction: column;
  17.             height:100vh;
  18.         }
  19.         header{
  20.             height:60px;
  21.             background:lightblue;
  22.         }
  23.         main{
  24.             height:100px;
  25.             background:pink;
  26.             flex-grow:1;
  27.         }
  28.         footer{
  29.             height:60px;
  30.             background:#ddd;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <header></header>
  36.     <main></main>
  37.     <footer></footer>
  38. </body>
  39. </html>

 

 

元素动态缩小的处理技巧：

  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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article{
  15.             display:flex;
  16.         }
  17.         article div{
  18.             background:lightblue;
  19.             border:1px solid lightblue;
  20.             padding:10px;
  21.             background-clip:content-box;
  22.             width:120px;
  23.             height:120px;
  24.         }
  25.         /* flex-shrink 空间不足时的缩小比例，设置为0表示不缩小 */
  26.         article div:nth-child(1){
  27.             flex-shrink:0;
  28.         }
  29.         article div:nth-child(2){
  30.             flex-shrink:1;
  31.         }
  32.         article div:nth-child(3){
  33.             flex-shrink:2;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <article>
  39.         <div>1</div>
  40.         <div>2</div>
  41.         <div>3</div>
  42.     </article>
  43. </body>
  44. </html>

 

 

主轴的基准尺寸的定义：

flex-basis 指定了 flex 元素在主轴方向上的初始大小

如果flex-direction是row，则主轴的基准尺寸可覆盖width；

如果flex-direction是column，则主轴的基准尺寸可覆盖height；

作用可以参考这篇：https://juejin.im/post/6844904152238129165

  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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article{
  15.             display:flex;
  16.         }
  17.         article div{
  18.             background:lightblue;
  19.             border:1px solid lightblue;
  20.             padding:10px;
  21.             background-clip:content-box;
  22.             width:120px;
  23.             height:120px;
  24.             flex-basis:100px;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <article>
  30.         <div>1</div>
  31.         <div>2</div>
  32.         <div>3</div>
  33.     </article>
  34. </body>
  35. </html>

 

 

弹性元素组规则和定义：

flex-grow+flex-shrink+flex-basis可简写为flex

  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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article{
  15.             display:flex;
  16.         }
  17.         article div{
  18.             background:lightblue;
  19.             border:1px solid lightblue;
  20.             padding:10px;
  21.             background-clip:content-box;
  22.             width:120px;
  23.             height:120px;
  24.             flex-grow:1;
  25.             flex-shrink:2;
  26.             flex-basis:100px;
  27.             /* 简写形式 */
  28.             flex:1 2 100px;
  29.             /* 都不缩放的情况下，会溢出 */
  30.             flex:1 0 150px;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <article>
  36.         <div>1</div>
  37.         <div>2</div>
  38.         <div>3</div>
  39.     </article>
  40. </body>
  41. </html>

 

 

也可以单独进行调整：

  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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article{
  15.             display:flex;
  16.         }
  17.         article div{
  18.             background:lightblue;
  19.             border:1px solid lightblue;
  20.             padding:10px;
  21.             background-clip:content-box;
  22.             width:120px;
  23.             height:120px;
  24.         }
  25.         article div:nth-child(1){
  26.             flex: 1 0 150px;
  27.         }
  28.         article div:nth-child(2){
  29.             flex: 1 2 150px;
  30.         }
  31.         article div:nth-child(3){
  32.             flex: 1 1 150px;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <article>
  38.         <div>1</div>
  39.         <div>2</div>
  40.         <div>3</div>
  41.     </article>
  42. </body>
  43. </html>

 

 

控制弹性元素的排序：

数字越大越往后，可负数，越负越往前

  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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article{
  15.             display:flex;
  16.         }
  17.         article div{
  18.             background:lightblue;
  19.             border:1px solid lightblue;
  20.             padding:10px;
  21.             background-clip:content-box;
  22.             width:120px;
  23.             height:120px;
  24.         }
  25.         article div:nth-child(1){
  26.             order:2;
  27.         }
  28.         article div:nth-child(2){
  29.             order:3;
  30.         }
  31.         article div:nth-child(3){
  32.             order:-1;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <article>
  38.         <div>1</div>
  39.         <div>2</div>
  40.         <div>3</div>
  41.     </article>
  42. </body>
  43. </html>

 

 

弹性元素排序实例：

  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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article{
  15.             display:flex;
  16.             flex-direction:column;
  17.             height:100vh;
  18.         }
  19.         article section{
  20.             background:lightblue;
  21.             border:1px solid lightblue;
  22.             padding:10px;
  23.             background-clip:content-box;
  24.             flex:1 0 100px;
  25.             text-align:center;
  27.             display:flex;
  28.             flex-direction:column;
  29.  
  30.         }
  31.         article section div{
  32.             flex:1;
  34.             display:flex;
  35.             flex-direction:column;
  36.             justify-content:center;
  37.         }
  38.         article section span{
  39.             padding:10px;
  40.             background:pink;
  41.             cursor:pointer;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <article>
  47.         <section>
  48.             <div>项目1</div>
  49.             <span onclick="up(this)">up</span>
  50.         </section>
  51.         <section>
  52.             <div>项目2</div>
  53.             <span onclick="up(this)">up</span>
  54.         </section>
  55.         <section>
  56.             <div>项目3</div>
  57.             <span onclick="up(this)">up</span>
  58.         </section>
  59.     </article>
  60.  
  61.     <script>
  62.         function up(el){
  63.             let order = getComputedStyle(el.parentElement,null).order;
  64.             el.parentElement.style.order = order*1 - 1; // 点击up让元素的order-1
  65.             console.log(order);
  66.         }
  67.     </script>
  68. </body>
  69. </html>

 

 

弹性布局操作文本节点：

  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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article{
  15.             display:flex;
  16.             height:100vh;
  17.             justify-content:space-between;
  18.             align-items:center;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <article>
  24.         这是文本
  25.         <div>这是div</div>
  26.         这是文本
  27.     </article>
  28.  
  29. </body>
  30. </html>

 

 

多级菜单的弹性布局：

  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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         body{
  15.             height:100vh;
  16.             display:flex;
  17.             flex-direction:column;
  18.         }
  19.         header{
  20.             height:60px;
  21.             background:pink;
  22.         }
  23.         main{
  24.             flex:1;
  25.             background:lightblue;
  26.         }
  27.         footer{
  28.             height:50px;
  29.             background:#ddd;
  30.             border-top:1px solid #eee;
  32.             display:flex;
  33.             justify-content:space-between;
  34.         }
  35.         footer section{
  36.             flex:1;
  37.             border-right:1px solid #eee;
  39.             display:flex;
  40.             flex-direction:column-reverse;
  41.             
  42.         }
  43.         footer section:last-child{
  44.             border-right:none;
  45.         }
  46.         footer section h4{
  47.             flex:0 0 50px;
  48.             cursor:pointer;
  50.             display:flex;
  51.             flex-direction:column;
  52.             justify-content:center;
  53.             align-items:center;
  54.         }
  55.         footer section ul{
  56.             display:flex;
  57.             flex-direction:column;
  58.             border:1px solid #eee;
  59.             margin-bottom:5px;
  60.             text-align:center;
  61.         }
  62.         footer section ul li{
  63.             height:50px;
  64.             line-height:50px;
  65.             border-bottom:1px solid #eee;
  66.             cursor:pointer;
  67.             background:#ddd;
  68.         }
  69.         footer section ul li:last-child{
  70.             border-bottom:none;
  71.         }
  72.     </style>
  73. </head>
  74. <body>
  75.     <header></header>
  76.     <main></main>
  77.     <footer>
  78.         <section>
  79.             <h4>教程</h4>
  80.             <ul>
  81.                 <li>html</li>
  82.                 <li>css</li>
  83.                 <li>js</li>
  84.             </ul>
  85.         </section>
  86.         <section>
  87.             <h4>直播</h4>
  88.         </section>
  89.         <section>
  90.             <h4>软件</h4>
  91.         </section>
  92.     </footer>
  93.  
  94. </body>
  95. </html>

 

 

使用margin自动撑满空间的技巧：

  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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         nav{
  15.             width:1200px;
  16.             height:60px;
  17.             background:#ddd;
  18.             box-shadow:0 0 0 rgba(0,0,0,.2);
  19.             margin:0 auto;
  20.             display:flex;
  21.         }
  22.         ul{
  23.             list-style:none;
  24.             display:flex;
  25.             align-items:center;
  26.         }
  27.         ul:first-of-type{
  28.             /* 上下两句可以起到相同的效果 */
  29.             margin-right:auto;
  30.             /* flex:1; */
  31.         }
  32.         ul:first-of-type>li{
  33.             margin:0 50px;
  34.         }
  35.         ul:nth-of-type(2) li{
  36.             border-radius:50%;
  37.             width:30px;
  38.             height:30px;
  39.             background:pink;
  40.         }
  41.  
  42.     </style>
  43. </head>
  44. <body>
  45.     <nav>
  46.         <ul>
  47.             <li>li</li>
  48.             <li>li</li>
  49.             <li>li</li>
  50.         </ul>
  51.         <ul>
  52.             <li></li>
  53.         </ul>
  54.     </nav>
  55.  
  56. </body>
  57. </html>

 

DIV块右bai侧留空自动取得margin-right: auto

原文链接：http://www.cnblogs.com/chenyingying0/p/13946329.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号