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

弹性布局初体验：

  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.         main{
  15.             width:100%;
  16.             height:100vh;
  17.             display:flex;
  18.         }
  19.         nav{
  20.             width:80px;
  21.             background:pink;
  22.         }
  23.         article{
  24.             background:lightblue;
  25.             flex:1;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <main>
  31.         <nav></nav>
  32.         <article></article>
  33.     </main>
  34. </body>
  35. </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.             display:flex;
  16.             height:100vh;
  17.             flex-direction:column;
  18.         }
  19.         main{
  20.             background:pink;
  21.             flex:1;
  22.         }
  23.         footer{
  24.             height:60px;
  25.             background:#ddd;
  26.             display:flex;
  27.             justify-content: space-evenly;
  28.         }
  29.         footer div{
  30.             flex:1;
  31.             text-align:center;
  32.             line-height:60px;
  33.             color:#555;
  34.         }
  35.         footer div:nth-of-type(n+2){
  36.             border-left:1px solid #ccc;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <main></main>
  42.     <footer>
  43.         <div>item</div>
  44.         <div>item</div>
  45.         <div>item</div>
  46.         <div>item</div>
  47.     </footer>
  48. </body>
  49. </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.             border:1px solid pink;
  16.             width:100%;
  17.             display:flex;
  18.             flex-direction:row;
  19.             flex-direction:row-reverse;
  20.             flex-direction:column;
  21.             flex-direction:column-reverse;
  22.             
  23.         }
  24.         /* article下的所有子元素 */
  25.         article *{
  26.             width:100px;
  27.             height:100px;
  28.             background:lightblue;
  29.             margin:5px;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <article>
  35.         <div>1</div>
  36.         <div>2</div>
  37.         <div>3</div>
  38.     </article>
  39. </body>
  40. </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.             border:1px solid pink;
  16.             width:100%;
  17.             display:flex;
  18.             flex-direction:row;
  19.             flex-wrap:wrap;
  20.             flex-wrap:wrap-reverse;
  21.             
  22.         }
  23.         /* article下的所有子元素 */
  24.         article *{
  25.             width:140px;
  26.             height:140px;
  27.             background:lightblue;
  28.             margin:5px;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <article>
  34.         <div>1</div>
  35.         <div>2</div>
  36.         <div>3</div>
  37.     </article>
  38. </body>
  39. </html>

 

 

统一设置元素的排列方式与换行：

flex-direction + flex-wrap = flex-flow

  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.             border:1px solid pink;
  16.             width:100%;
  17.             display:flex;
  18.             flex-flow:row wrap;
  19.             
  20.         }
  21.         /* article下的所有子元素 */
  22.         article *{
  23.             width:140px;
  24.             height:140px;
  25.             background:lightblue;
  26.             margin:5px;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <article>
  32.         <div>1</div>
  33.         <div>2</div>
  34.         <div>3</div>
  35.     </article>
  36. </body>
  37. </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.             border:1px solid pink;
  16.             width:100%;
  17.             display:flex;
  18.             /* 主轴开始 */
  19.             justify-content:flex-start;
  20.             /* 主轴结束 */
  21.             justify-content:flex-end;
  22.             /* 整体居中 */
  23.             justify-content:center;
  24.             /* 左右两边距离相等 */
  25.             justify-content:space-around;
  26.             /* 左右靠边，中间平分 */
  27.             justify-content:space-between;
  28.             /* 完全平分 */
  29.             justify-content: space-evenly;
  30.             
  31.         }
  32.         /* article下的所有子元素 */
  33.         article *{
  34.             width:80px;
  35.             height:80px;
  36.             background:lightblue;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <article>
  42.         <div>1</div>
  43.         <div>2</div>
  44.         <div>3</div>
  45.     </article>
  46. </body>
  47. </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.             border:1px solid pink;
  16.             width:100%;
  17.             height:100vh;
  18.             display:flex;
  19.             /* 交叉轴开始 */
  20.             align-items:flex-start;
  21.             /* 交叉轴结束 */
  22.             align-items:flex-end;
  23.             /* 交叉轴居中 */
  24.             align-items:center;
  25.             /* 交叉轴拉伸，当direcrion为row时，需要元素不设置高度；当direction为column时，需要元素不设置宽度 */
  26.             align-items:stretch;
  27.             
  28.         }
  29.         /* article下的所有子元素 */
  30.         article *{
  31.             width:80px;
  32.             /* height:80px; */
  33.             background:lightblue;
  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>

 

 

水平垂直居中：

  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.             border:1px solid pink;
  16.             width:100%;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items:center;
  21.             
  22.         }
  23.         /* article下的所有子元素 */
  24.         article *{
  25.             width:80px;
  26.             height:80px;
  27.             background:lightblue;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <article>
  33.         <div>1</div>
  34.         <div>2</div>
  35.         <div>3</div>
  36.     </article>
  37. </body>
  38. </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.             border:1px solid pink;
  16.             width:100%;
  17.             height:100vh;
  18.             display:flex;
  19.             flex-wrap:wrap;
  20.             align-content: flex-start;
  21.             align-content: flex-end;
  22.             align-content: center;
  23.             align-content: space-around;
  24.             align-content: space-between;
  25.             align-content: space-evenly;
  26.             
  27.         }
  28.         /* article下的所有子元素 */
  29.         article *{
  30.             width:120px;
  31.             height:120px;
  32.             background:lightblue;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <article>
  38.         <div>1</div>
  39.         <div>2</div>
  40.         <div>3</div>
  41.         <div>4</div>
  42.         <div>5</div>
  43.     </article>
  44. </body>
  45. </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.             border:1px solid pink;
  16.             width:100%;
  17.             height:100vh;
  18.             display:flex;
  19.             
  20.         }
  21.         /* article下的所有子元素 */
  22.         article *{
  23.             width:120px;
  24.             height:120px;
  25.             background:lightblue;
  26.         }
  27.         article :first-child{
  28.             align-self:stretch;
  29.             height:auto;
  30.         }
  31.         article :nth-child(2){
  32.             align-self:center;
  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.             border:1px solid pink;
  16.             width:100%;
  17.             height:100vh;
  18.             display:flex;
  19.             
  20.         }
  21.         /* article下的所有子元素 */
  22.         article *{
  23.             width:80px;
  24.             height:80px;
  25.             background:lightblue;
  26.             padding:10px;
  27.             background-clip:content-box;
  28.             border:1px solid lightblue;
  29.         }
  30.         article :first-child{
  31.             /* 不平分，默认的宽度 */
  32.             flex-grow:0;
  33.         }
  34.         article :nth-child(2){
  35.             flex-grow:2;
  36.         }
  37.         article :nth-child(3){
  38.             flex-grow:3;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <article>
  44.         <div>1</div>
  45.         <div>2</div>
  46.         <div>3</div>
  47.     </article>
  48. </body>
  49. </html>

 

原文链接：http://www.cnblogs.com/chenyingying0/p/13945942.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号