Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 传统布局与Flex布局
Blogger Information
Blog 55
fans 3
comment 0
visits 54668
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
传统布局与Flex布局
王佳祥
Original
1052 people have browsed it

传统布局与Flex布局

一、传统布局

1.浮动布局

  • 实例1：(基于浮动的二列布局)
  1. <!--基于浮动的二列布局-->
  2.  <title>基于浮动的二列布局</title>
  3.     <style>
  4.       header,
  5.       aside,
  6.       main,
  7.       footer {
  8.         background: #dedede;/*设置背景颜色*/
  9.       }
  10.       header,
  11.       footer {
  12.         height: 50px;/*头部和底部的高度*/
  13.       }
  14.       aside,
  15.       main {
  16.         min-height: 500px;/*侧边栏和主体内容的最小高度*/
  17.       }
  18.       .wrap {
  19.         width: 1000px;
  20.         border: 1px solid #000;
  21.         overflow: auto;
  22.         margin: 10px auto;/*主体父级的宽度，边框，浮动的高度塌陷，居中*/
  23.       }
  24.       aside {
  25.         width: 200px;
  26.         float: left;/*侧边栏左浮动*/
  27.       }
  28.       main {
  29.         width: 790px;
  30.         float: right;/*主体内容右浮动*/
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <header>页眉</header>
  36.     <div class="wrap">
  37.       <aside>侧边栏</aside>
  38.       <main>主体</main>
  39.     </div>
  40.     <footer>页脚</footer>
  41.   </body>
  42. </html>
  • 预览：

2.定位布局

  • 实例1：(基于定位的二列布局)
  1. <!--基于定位的二列布局-->
  2. <title>基于定位的二列布局</title>
  3.     <style>
  4.       header,
  5.       aside,
  6.       main,
  7.       footer {
  8.         background: #dedede;/*设置背景颜色*/
  9.       }
  10.       header,
  11.       footer {
  12.         height: 50px;/*头部和底部的高度*/
  13.       }
  14.       aside,
  15.       main {
  16.         min-height: 500px;/*侧边栏和主体内容的最小高度*/
  17.       }
  18.       .wrap {
  19.         width: 1000px;
  20.         border: 1px solid #000;
  21.         margin: 10px auto;
  22.         position: relative;/*主体父级的宽度，边框，居中，相对定位*/
  23.       }
  24.       aside {
  25.         width: 200px;/*侧边栏宽度*/
  26.       }
  27.       main {
  28.         width: 790px;
  29.         position: absolute;
  30.         right: 0;
  31.         top: 0;/*主体宽度，绝对定位*/
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <header>页眉</header>
  37.     <div class="wrap">
  38.       <aside>侧边栏</aside>
  39.       <main>主体</main>
  40.     </div>
  41.     <footer>页脚</footer>
  42.   </body>
  • 预览：

3.多栏/列显示

  • 实例1：(内容的多栏/列显示)
  1. <!--内容的多栏/列显示-->
  2. <title>内容的多栏显示</title>
  3.     <style>
  4.       * {
  5.         padding: 0;
  6.         margin: 0;
  7.         box-sizing: border-box;
  8.       }
  9.       :root {
  10.         font-size: 16px;
  11.         color: #555;
  12.       }
  13.       div {
  14.         border: 1px solid #000;
  15.         padding: 1rem;
  16.         width: 60rem;
  17.         margin: 30px auto;
  18.       }
  19.       div {
  20.         /*分列显示*/
  21.         column-count: 3;
  22.         /* column-width: auto; */
  23.         column-rule-style: solid; /*垂直分割线*/
  24.         column-rule-width: 1px; /*分割线宽度为1px*/
  25.         column-rule-color: green; /*分割线颜色为绿色*/
  26.         column-rule: 1px solid green;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div>
  32.       新华社北京6月22日电
  33.       国家主席习近平22日晚在北京以视频方式会见欧洲理事会主席米歇尔和欧盟委员会主席冯德莱恩。
  34.       习近平指出，新冠肺炎疫情发生以来，中国和欧盟相互支持、相互帮助。中方愿同欧方携手努力，推动“后疫情时代”中欧关系更加稳健成熟，迈向更高水平。
  35.       习近平强调，中国既是拥有悠久历史的古老国度，又是充满活力的发展中国家。中国要和平不要霸权。我们一切政策和工作的出发点就是让中国人民过上幸福生活。我们将沿着和平发展道路坚定不移走下去。中国是机遇不是威胁。中国将继续深化改革、扩大开放，这将为欧洲提供新一轮合作机遇和发展空间。中国是伙伴不是对手。中欧没有根本利害冲突，合作远大于竞争，共识远大于分歧。双方要相互尊重、求同存异、和而不同，不断增进彼此理解和信任，在合作中扩大共同利益，在发展中破解难题，打造更具世界影响力的中欧全面战略伙伴关系。
  36.       习近平强调，疫情冲击下的世界正在深刻变化，面临更多不稳定不确定因素。我曾提出，要努力在危机中育新机，于变局中开新局。这一点也适用于中欧关系。中欧作为世界两大力量、两大市场、两大文明，主张什么、反对什么、合作什么，具有世界意义。
  37.       中欧要做维护全球和平稳定的两大力量。中方愿同欧方就重大问题进行交流，相信欧盟将朝着团结、稳定、开放、繁荣的方向不断前进，乐见欧方为国际和平稳定作出建设性贡献，愿同欧方加强战略合作，共同应对全球性挑战。
  38.       中欧要做推动全球发展繁荣的两大市场。中欧两大经济体应该发挥世界经济“双引擎”作用，拉动世界经济复苏，共同支持科学有序复工复产，加强宏观经济政策协调，维护全球产业链供应链稳定通畅。双方要保持相互市场开放，加快推进中欧投资协定谈判，加强中欧绿色和数字领域合作，构建绿色发展伙伴。双方要加强对非三方合作。
  39.       中欧要做坚持多边主义、完善全球治理的两大文明。无论国际形势如何变化，中国都将站在多边主义一边，坚持共商共建共享的全球治理观。中方赞赏欧盟坚定维护多边主义，参与国际抗疫合作，并加大对世卫组织等国际机构投入，愿同欧方就重大国际和地区问题加强协调合作，加强全球公共卫生治理对话合作，推动构建人类卫生健康共同体。
  40.       习近平强调，我愿同两位主席保持密切沟通，推进中欧一系列重大政治议程，推动中欧关系迈上新台阶。
  41.       米歇尔和冯德莱恩表示，欧中作为世界两大经济体，双方关系充满活力。当前世界面临很大不确定性，只有国际合作才能应对全球性挑战，只有对话协商才能解决矛盾冲突，消除地区不稳定。欧方愿本着坦诚的态度，同中方开展战略对话，扩大共识。欧方愿同中方就疫苗研发、复工复产加强合作，扩大双边贸易规模，推动绿色低碳、数字经济等广泛领域合作取得更多进展，尽快达成欧中投资协定，为尽早克服疫情影响、促进世界经济复苏作出努力。欧方坚持多边主义，愿同中方在联合国、世界贸易组织、二十国集团等框架内就公共卫生安全、气候变化、可持续发展、对非三方合作等重大问题加强协调合作。欧方愿同中方共同努力，推动欧中商定的重大政治议程取得成功。
  42.     </div>
  43.   </body>
  • 预览：

  • 实例2：(分列显示的布局，不推荐用这个布局)
  1. <!--分列显示布局-->
  2.  <style>
  3.       header,
  4.       footer {
  5.         height: 40px;
  6.         background: lightblue; /*底部头部的高度背景颜色*/
  7.       }
  8.       .container {
  9.         width: 1000px;
  10.         margin: 10px auto;
  11.         border: 2px solid #000; /*div的宽度，内边距，边框*/
  12.         column-count: 4;/*分四列显示*/
  13.       }
  14.       aside {
  15.         background: lightgreen; /*侧边栏的背景颜色，最小高度*/
  16.         height: 600px;
  17.       }
  18.       main {
  19.         background: cyan; /*主体部分的背景颜色，最小高度*/
  20.         height: 1200px;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <header>header</header>
  26.     <div class="container">
  27.       <aside>left</aside>
  28.       <main>main</main>
  29.       <aside>right</aside>
  30.     </div>
  31.     <footer>
  32.       footer
  33.     </footer>
  34.   </body>
  • 预览：

二、FlexBox布局

1.flex布局快速预览

  • 实例1：
  1. <title>FlexBox弹性布局快速预览</title>
  2.     <style>
  3.       .container {
  4.         display: flex; /*如果这个容器中的内容要使用FlexBox布局，第一步就是必须将这个容器转换为弹性盒子*/
  5.         width: 300px; /*宽为300px*/
  6.       }
  7.       .container > .item {
  8.         /*一旦将父元素转为弹性容器，内部的“子元素”就会自动成为：弹性项目*/
  9.         /*不管这个项目标签之前是什么类型，统统转为“行内块”*/
  10.         /*行内：全部在一排显示*/
  11.         /*块：可以设置宽和高*/
  12.         /*flex:auto;自动分配空间*/
  13.         /*所有项目必须沿主轴排列*/
  14.         width: 60px;
  15.       }
  16.       .container {
  17.         flex-wrap: wrap; /*换行；nowrap:不换行，默认是不换行*/
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div class="container">
  23.       <div class="item">1</div>
  24.       <span class="item">2</span>
  25.       <a class="item">3</a>
  26.       <a class="item">4</a>
  27.       <a class="item">5</a>
  28.       <a class="item">6</a>
  29.       <div class="item">7</div>
  30.       <div class="item">8</div>
  31.       <div class="item">9</div>
  32.     </div>
  33.   </body>
  • 预览：

  • 实例2：
  1. <title>主轴方向与项目排列的简写</title>
  2.     <style>
  3.       .container {
  4.         width: 300px;
  5.         height: 200px;
  6.         display: flex;
  7.         /*项目在交叉轴上默认是自动伸缩的*/
  8.         align-items: stretch; /*stretch默认值*/
  9.         /*center元素位于容器的中心
  10.         flex-start元素位于容器的开头
  11.         flex-end元素位于容器的结尾
  12.         baseline元素位于容器的基线上
  13.         initial    设置该属性为它的默认值
  14.         inherit    从父元素继承该属性
  15.          */
  16.         align-items: center;
  17.         /*默认值不用写出来
  18.         flex-direction:row;
  19.         flex-wrap:nowrap;
  20.         flex-flow:row nowrap;
  21.         */
  22.         flex-flow: column wrap;
  23.         /*垂直排列，自动换行*/
  24.       }
  25.       .container > .item {
  26.         width: 60px;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="container">
  32.       <div class="item">1</div>
  33.       <span class="item">2</span>
  34.       <a class="item">3</a>
  35.       <a class="item">4</a>
  36.       <a class="item">5</a>
  37.       <a class="item">6</a>
  38.       <div class="item">7</div>
  39.       <div class="item">8</div>
  40.       <div class="item">9</div>
  41.     </div>
  42.   </body>
  • 预览:

  • 实例3：
  1. <title>FlexBox容器属性实战：快速写一个主导航</title>
  2.     <style>
  3.       * {
  4.         padding: 0;
  5.         margin: 0;
  6.         box-sizing: border-box;
  7.       }
  8.       a {
  9.         text-decoration: none;
  10.         color: #ccc;
  11.       }
  12.       nav {
  13.         height: 40px;
  14.         background: #333;
  15.         padding: 0 50px;
  16.         display: flex;
  17.       }
  18.       nav a {
  19.         height: inherit;
  20.         line-height: 40px;
  21.         padding: 0 15px;
  22.       }
  23.       nav a:hover {
  24.         background: seagreen;
  25.         color: #fff;
  26.       }
  27.       nav a:last-of-type {
  28.         margin-left: auto;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <header>
  34.       <nav>
  35.         <a href="">首页</a>
  36.         <a href="">视频教程</a>
  37.         <a href="">社区问答</a>
  38.         <a href="">资源下载</a>
  39.         <a href="">登录/注册</a>
  40.       </nav>
  41.     </header>
  42.   </body>
  • 预览：

  • 实例4：（项目属性：order控制项目属性）
  1.  <title>项目属性：order控制项目属性</title>
  2.     <style>
  3.       .container {
  4.         width: 570px;
  5.         display: flex;
  6.         flex-direction: column;
  7.       }
  8.       .container > .item {
  9.         border: 1px solid #000;
  10.         padding: 10px;
  11.         display: flex;
  12.         position: relative;
  13.       }
  14.       .container > .item > div {
  15.         display: flex;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div class="container">
  21.       <div class="item">
  22.         <img src="1.jpg" alt="" />
  23.         <div>
  24.           <button onclick="up(this)">向上</button>
  25.           <button onclick="down(this)">向下</button>
  26.         </div>
  27.       </div>
  28.       <div class="item">
  29.         <img src="2.jpg" alt="" />
  30.         <div>
  31.           <button onclick="up(this)">向上</button>
  32.           <button onclick="down(this)">向下</button>
  33.         </div>
  34.       </div>
  35.       <div class="item">
  36.         <img src="3.jpg" alt="" />
  37.         <div>
  38.           <button onclick="up(this)">向上</button>
  39.           <button onclick="down(this)">向下</button>
  40.         </div>
  41.       </div>
  42.     </div>
  43.   </body>
  44.   <script>
  45.     let up = (ele) => (ele.offsetParent.style.order -= 1);
  46.     let down = (ele) => (ele.offsetParent.style.order += 1);
  47.   </script>
  48. </html>
  • 预览：

三、学习总结

1. 复习了前几天学习的浮动布局，定位布局

  1. float:left; 左浮动
  2. float:right; 右浮动
  3. overflow:hidden;/overflow:auto; 清除浮动，解决父元素高度塌陷问题
  4. 相对定位 position:relative;
  5. 绝对定位 position:absolute;

2. 分栏列显示

  1. column-count:4; 分为4列
  2. column-rule-style: solid; 垂直分割线
  3. column-rule-width: 1px; 分割线宽度为1px
  4. column-rule-color: green; 分割线颜色为绿色
  5. column-width: auto; 自动分配列数
  6. column-rule:1px solid red; 简写

3. flex布局

  1. display:flex; 将容器转换为弹性盒子
  2. 将父元素转为弹性容器，内部的“子元素”就会自动成为：弹性项目
  3. 不管这个项目标签之前是什么类型，统统转为“行内块”
  4. 行内：全部在一排显示
  5. 块：可以设置宽和高
  6. flex:auto;自动分配空间
  7. 所有项目必须沿主轴排列
  8. flex-wrap: wrap; 换行；
  9. nowrap:不换行，默认是不换行
  10. 项目在交叉轴上默认是自动伸缩的
  11. align-items: stretch; stretch默认值
  12. align-items: center; center元素位于容器的中心
  13. align-items: flex-start; flex-start元素位于容器的开头
  14. align-items: flex-end; flex-end元素位于容器的结尾
  15. align-items: baseline; baseline元素位于容器的基线上
  16. align-items: initial; initial    设置该属性为它的默认值
  17. align-items: inherit; inherit    从父元素继承该属性
  18. flex-direction:row; 默认水平排列
  19. flex-direction:column; 垂直排列
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：flex中的属性没几个, 就是可以取的值非常多,不太好记, 其实相比grid布局,flex简直是太简单了, grid中差不多有几十个属性,而flex常用的不到10个, 加油吧
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post