search

博客列表 >传统布局回顾与flex弹性盒子案例解析

传统布局回顾与flex弹性盒子案例解析

lilove的博客
lilove的博客原创
2020年06月24日 02:16:211224浏览

一、传统布局回顾

1. 浮动实现两列布局 

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚日志：浮动两列布局</title>
  7.   </head>
  8.   <style>
  9.     header,
  10.     footer {
  11.       width: 100%;
  12.       height: 50px;
  13.       background-color: aqua;
  14.     }
  15.     .container {
  16.       width: 720px;
  17.       /* 浮动元素容器如果不设高度将会塌陷 */
  18.       min-height: 600px;
  19.       margin: 20px auto;
  20.       border: 1px solid lightslategrey;
  21.       /* 解决高度塌陷 */
  22.       overflow: hidden;
  23.     }
  24.     /* 将中间左边浮动放到容器左边 */
  25.     .container > aside {
  26.       width: 200px;
  27.       /* 高度继承 */
  28.       min-height: inherit;
  29.       background-color: lightpink;
  30.       margin-right: 20px;
  31.       float: left;
  32.     }
  33.     /* 将内容区浮动放到容器右边 */
  34.     .container > main {
  35.       width: 500px;
  36.       height: 600px;
  37.       background-color: lightsalmon;
  38.       float: left;
  39.       /* 也可以用float: right */
  40.       /* float: right; */
  41.     }
  42.   </style>
  43.   <body>
  44.     <header>头部</header>
  45.     <div class="container">
  46.       <aside>中间左边</aside>
  47.       <main>内容区</main>
  48.     </div>
  49.     <footer>底部</footer>
  50.   </body>
  51. </html>

2. 定位实现两列布局 

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚日志：定位两列布局</title>
  7.   </head>
  8.   <style>
  9.     header,
  10.     footer {
  11.       width: 100%;
  12.       height: 50px;
  13.       background-color: aqua;
  14.     }
  15.     /* 将容器设置为相对定位，使子元素可以以容器为定位依据 */
  16.     .container {
  17.       width: 720px;
  18.       min-height: 600px;
  19.       margin: 20px auto;
  20.       border: 1px solid lightslategrey;
  21.       position: relative;
  22.     }
  23.     /* 将中间左边相对于容器的左上角顶点位置放到容器左边 */
  24.     .container > aside {
  25.       width: 200px;
  26.       min-height: 600px;
  27.       background-color: lightpink;
  28.       margin-right: 20px;
  29.       position: absolute;
  30.       /* 为0的定位可以不写 */
  31.       /* top: 0; */
  32.       /* left: 0; */
  33.     }
  34.     /* 将内容区相对于容器右上角顶点位置放到容器右边 */
  35.     .container > main {
  36.       width: 500px;
  37.       min-height: 600px;
  38.       background-color: lightsalmon;
  39.       position: absolute;
  40.       /* top: 0; */
  41.       /* right: 0; */
  42.       /* 也可以用left将左侧区域宽度留出来 */
  43.       left: 220px;
  44.     }
  45.   </style>
  46.   <body>
  47.     <header>头部</header>
  48.     <div class="container">
  49.       <aside>中间左边</aside>
  50.       <main>内容区</main>
  51.     </div>
  52.     <footer>底部</footer>
  53.   </body>
  54. </html>

两列布局运行效果

3. 元素排版 

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚日志：内容排版布局</title>
  7.   </head>
  8.   <style>
  9.     * {
  10.       padding: 0;
  11.       margin: 0;
  12.       box-sizing: content-box;
  13.     }
  14.     /* 根元素html */
  15.     :root {
  16.       font-size: 16px;
  17.       color: navy;
  18.     }
  19.     div {
  20.       width: 40rem;
  21.       padding: 1rem;
  22.       margin: 50px auto;
  23.       border: 2px solid lightslategrey;
  25.       /* 分列显示 */
  26.       /* 分4列 */
  27.       column-count: 4;
  28.       /* 每列宽度200px */
  29.       column-width: 200px;
  30.       /* 分割条,可以选择样式 */
  31.       column-rule-style: groove;
  32.       column-rule-color: maroon;
  33.       /* 可以简写成与边框相似属性值 */
  34.       column-rule: 2px solid mediumvioletred;
  35.     }
  36.   </style>
  37.   <body>
  38.     <div>
  39.       今天下午，在北京市新型冠状病毒肺炎疫情防控工作第129场新闻发布会上，市疾控中心副主任庞星火通报了6月21日7例确诊患者的活动轨迹，以及补充通报了20日5例确诊患者的活动轨迹。
  40.       　　北京日报（ID：Beijing_Daily）记者梳理发现，这12名确诊病例中，有多名患者主要活动轨迹既无新发地直接接触史，又非确诊病例密接者。
  41.       　　据通报，6月21日海淀区田村路街道新增的病例5、病例6是一对夫妻，两人活动轨迹中均无新发地。
  42.       　　病例5，女，47岁，河北人，住海淀区田村路街道玉海园一里，工作单位为天客隆超市永定路店。6月12日曾到过永定路70号院，15日，超市二层停业，患者居家无外出。17日，9时到永定路二街坊的库房清卖鸡蛋未进入社区，随后，到超市发三街坊便民店购买水果和蔬菜，18日、19日，患者自述无外出。20日，与丈夫到航天中心医院发热门诊咨询，21日确诊。
  43.       　　病例6，男，48岁，河北人，住海淀区田村路街道玉海园一里，为病例5丈夫，曾于6日至11日到锦绣大地批发货物，14日，患者做核酸检测，15日取核酸检测结果，检测结果为阴性。之后返回家中，未再外出。16日患者开车去航天桥科技大厦物业餐厅送货物，17日至锦绣大地进货，18日至航天桥科技大厦物业餐厅送货、去西城区金融大厦地下一层物业餐厅，19日患者自述未外出。20日与妻子到航天中心医院发热门诊咨询，21日确诊。
  44.       　　值得注意的是，永定路街道永定路70号院，此前曾出现过确诊病例。
  45.       　　此外，补充通报的6月20日确诊5例病例中，病例4和病例5活动轨迹中也无新发地，但二人先后均到过凯德MALL大峡谷店。
  46.     </div>
  47.   </body>
  48. </html>

运行效果

4. 利用排版方法布局（不适合布局仅演示效果） 

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>列排版布局（不适合布局）</title>
  7.   </head>
  8.   <style>
  9.     header,
  10.     footer {
  11.       height: 50px;
  12.       background-color: aqua;
  13.     }
  14.     div {
  15.       width: 700px;
  16.       min-height: 600px;
  17.       margin: 10px auto;
  18.       background-color: lightseagreen;
  19.       /* 分列显示 */
  20.       column-count: 3;
  21.       /* 每列宽度200px */
  22.       /* column-width: 200px; */
  23.     }
  24.     div > aside {
  25.       /* 这种方式布局不能设置宽度 */
  26.       /* width: 200px; */
  27.       min-height: 600px;
  28.       background-color: limegreen;
  29.     }
  30.     div > main {
  31.       /* width: 500px; */
  32.       min-height: 600px;
  33.       background-color: lightcoral;
  34.       /* 使内容区跨2列，需要设置高度*2 */
  35.       column-span: 2;
  36.       min-height: 1200px;
  37.     }
  38.   </style>
  39.   <body>
  40.     <header>头部</header>
  41.     <div class="container">
  42.       <aside>中间左边</aside>
  43.       <main>内容区</main>
  44.     </div>
  45.     <footer>底部</footer>
  46.   </body>
  47. </html>

运行效果

二、弹性盒子布局flex

  • 要使用弹性盒子布局，必须先将元素容器设置为弹性容器；

  • 在CSS样式属性中设置：display: flex; ；

  • 转为弹性盒子的元素，都是“行内块”；

1. 单行弹性盒子

代码样例：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚日志：弹性盒子单行容器</title>
  7.   </head>
  8.   <style>
  9.     .container {
  10.       width: 300px;
  11.       /* 将容器转为弹性容器，内部子元素自动成为弹性项目 */
  12.       display: flex;
  13.     }
  15.     .container > .item {
  16.       /* 设置宽高后没有占满的位置是剩余空间，占据的地方是已分配空间 */
  17.       width: 50px;
  18.       height: 30px;
  19.       /* 弹性容器内部元素都是“行内块” */
  20.       /* 使弹性盒子内容占满容器 */
  21.       /* flex: auto; */
  22.       /* 如果项目宽高超过了容器宽高，会将项目收缩，将收缩的空间平分给项目 */
  23.       width: 100px;
  24.       /* 如果不想让项目自动收缩，就要使用多行容器，下个案例来说明 */
  25.     }
  26.   </style>
  27.   <body>
  28.     <div class="container">
  29.       <div class="item">1</div>
  30.       <div class="item">2</div>
  31.       <div class="item">3</div>
  32.       <span class="item">4</span>
  33.       <a href="" class="item">5</a>
  34.     </div>
  35.   </body>
  36. </html>

设置之后页面上的元素可以用 火狐浏览器 查看：

点击之后网页元素会显示结构：

2. 多行弹性盒子

  • 先来看一个图：

代码片段：

  1.   <style>
  2.     .container {
  3.       width: 300px;
  4.       /* 将容器转为弹性容器，内部子元素自动成为弹性项目 */
  5.       display: flex;
  6.     }
  8.     .container > .item {
  9.       /* 设置100px后总宽度500px大于父容器300px */
  10.       /* 如果项目宽高超过了容器宽高，会将项目收缩，将收缩的空间平分给项目 */
  11.       width: 100px;
  12.     }
  13.   </style>
  14.   <body>
  15.     <div class="container">
  16.       <div class="item">1</div>
  17.       <div class="item">2</div>
  18.       <div class="item">3</div>
  19.       <span class="item">4</span>
  20.       <a href="" class="item">5</a>
  21.     </div>
  22.   </body>
  • 运行效果：

  • 要让弹性容器中的元素不压缩，就需要在 .container 容器中加入：

    flex-wrap: warp;

加入后显示效果：

3. 单行弹性盒子中项目对齐方式

对齐方式代码片段：

  1.   <style>
  2.     .container {
  3.       width: 300px;
  4.       /* 将容器转为弹性容器，内部子元素自动成为弹性项目 */
  5.       display: flex;
  6.       /* 设置弹性盒子对齐方式 */
  7.       /* 内容开始方向开始 */
  8.       justify-content: flex-start;
  9.       /* 右对齐 */
  10.       justify-content: right;
  11.       /* 内容结束方向开始 */
  12.       justify-content: end;
  13.       /* 居中 */
  14.       justify-content: center;
  16.       /* 容器剩余空间在项目之间分配,类似两端对齐 */
  17.       justify-content: space-between;
  18.       /* 容器剩余空间在项目前后两端分配，项目之间是两端项目前后剩余空间2倍，分散对齐 */
  19.       justify-content: space-around;
  20.       /* 容器剩余空间在所有项目之间平均分配，包括第一个项目前端和最后项目后端 */
  21.       justify-content: space-evenly;
  22.     }
  24.     .container > .item {
  25.       /* 设置宽高后没有占满的位置是剩余空间，占据的地方是已分配空间 */
  26.       width: 50px;
  27.     }
  28.   </style>
  29.   <body>
  30.     <div class="container">
  31.       <div class="item">1</div>
  32.       <div class="item">2</div>
  33.       <div class="item">3</div>
  34.       <span class="item">4</span>
  35.       <a href="" class="item">5</a>
  36.     </div>
  37.   </body>
  • 运行效果：

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

4. 多行弹性盒子中项目对齐方式

代码片段：

  1.   <style>
  2.     .container {
  3.       width: 300px;
  4.       height: 100px;
  5.       /* 将容器转为弹性容器，内部子元素自动成为弹性项目 */
  6.       display: flex;
  7.       /* 设置多行弹性盒子才能使多行对齐属性生效 */
  8.       flex-wrap: wrap;
  10.       /* 多行弹性盒子排列方式 */
  11.       /* 默认值 */
  12.       align-content: stretch;
  13.       /* 属性值与单行对齐方式类似 */
  14.       align-content: flex-start;
  15.       align-content: flex-end;
  16.       align-content: center;
  17.       align-content: space-between;
  18.       align-content: space-around;
  19.       align-content: space-evenly;
  20.     }
  22.     .container > .item {
  23.       /* 设置宽高后没有占满的位置是剩余空间，占据的地方是已分配空间 */
  24.       width: 60px;
  25.     }
  26.   </style>
  27.   <body>
  28.     <div class="container">
  29.       <div class="item">1</div>
  30.       <div class="item">2</div>
  31.       <div class="item">3</div>
  32.       <span class="item">4</span>
  33.       <a href="" class="item">5</a>
  34.       <a href="" class="item">6</a>
  35.       <a href="" class="item">7</a>
  36.       <a href="" class="item">8</a>
  37.     </div>
  38.   </body>
  • 运行效果：

align-content: stretch;

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

  • 多行容器对齐方式与单行容器对齐方式相似，单行容器是项目之间，多行容器是行之间。

5. 弹性盒子主轴是垂直方向时项目对齐方式

  • 首先要将容器主轴方向改为列方向：

flex-direction: column;

代码片段：

  1.   <style>
  2.     .container {
  3.       width: 300px;
  4.       height: 100px;
  6.       /* 将容器转为弹性容器，内部子元素自动成为弹性项目 */
  7.       display: flex;
  9.       /* 默认是行方向 */
  10.       flex-direction: row;
  11.       /* 将主轴方向改为列方向 */
  12.       flex-direction: column;
  14.       /* 项目对齐方式 */
  15.       /* 内容开始方向开始 */
  16.       justify-content: flex-start;
  17.       /* 右对齐 */
  18.       justify-content: right;
  19.       /* 内容结束方向开始 */
  20.       justify-content: end;
  21.       /* 居中 */
  22.       justify-content: center;
  24.       /* 容器剩余空间在项目之间分配,类似两端对齐 */
  25.       justify-content: space-between;
  26.       /* 容器剩余空间在项目前后两端分配，项目之间是两端项目前后剩余空间2倍，分散对齐 */
  27.       justify-content: space-around;
  28.       /* 容器剩余空间在所有项目之间平均分配，包括第一个项目前端和最后项目后端 */
  29.       justify-content: space-evenly;
  30.     }
  32.     /* .container > .item {
  33.     } */
  34.   </style>
  35.   <body>
  36.     <div class="container">
  37.       <div class="item">1</div>
  38.       <div class="item">2</div>
  39.       <div class="item">3</div>
  40.     </div>
  41.   </body>
  • 运行效果：

justify-content: flex-start;

justify-content: end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

6. 弹性盒子主轴是交叉轴方向时项目对齐方式

代码片段：

  1.   <style>
  2.     .container {
  3.       width: 300px;
  4.       height: 200px;
  5.       /* 将容器转为弹性容器，内部子元素自动成为弹性项目 */
  6.       display: flex;
  7.       /* 项目在交叉轴上是默认自动伸缩的 */
  8.       align-items: stretch;
  10.       align-items: flex-start;
  11.       align-items: flex-end;
  12.       align-items: center;
  13.     }
  15.     .container > .item {
  16.       width: 60px;
  17.     }
  18.   </style>
  19.   <body>
  20.     <div class="container">
  21.       <div class="item">1</div>
  22.       <div class="item">2</div>
  23.       <div class="item">3</div>
  24.     </div>
  25.   </body>
  • 属性值与前面的代码类似，只是方向不同。

7. 弹性盒子主轴方向和项目对齐方式简写

  • 列方向不换行：

flex-flow: column nowrap

…

8. 利用弹性盒子制作导航条

代码样例：

  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.   </head>
  8.   <style>
  9.     /* 初始化元素，去掉边距 */
  10.     * {
  11.       padding: 0;
  12.       margin: 0;
  13.       box-sizing: border-box;
  14.     }
  16.     nav {
  17.       height: 50px;
  18.       padding: 0 50px;
  19.       background-color: darkslategrey;
  20.       /* 弹性容器 */
  21.       display: flex;
  22.     }
  24.     nav > a {
  25.       height: inherit;
  26.       line-height: 50px;
  27.       color: floralwhite;
  28.       text-decoration: none;
  29.       padding: 0 10px;
  30.     }
  32.     /* 第一个项目右边距 */
  33.     nav > a:first-of-type {
  34.       margin-right: 50px;
  35.     }
  37.     /* 将最后一个项目右对齐 */
  38.     nav > a:last-of-type {
  39.       margin-left: auto;
  40.     }
  42.     nav > a:hover {
  43.       color: lightgreen;
  44.       background-color: lightcoral;
  45.     }
  46.   </style>
  47.   <body>
  48.     <nav>
  49.       <a href="" class="item">第一页</a>
  50.       <a href="" class="item">第二页</a>
  51.       <a href="" class="item">第三页</a>
  52.       <a href="" class="item">第四页</a>
  53.       <a href="" class="item">第五页</a>
  54.       <a href="" class="item">第六页</a>
  55.     </nav>
  56.   </body>
  57. </html>
  • 运行效果：

9. 弹性盒子order案例

代码样例：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚日志：order案例</title>
  7.   </head>
  8.   <style>
  9.     .container {
  10.       border: 1px solid darkslategrey;
  11.       display: flex;
  12.       flex-direction: column;
  13.     }
  15.     .container > .item {
  16.       font-size: 26px;
  17.       padding: 10px;
  18.       border: 1px solid darkslategray;
  19.       display: flex;
  20.       /* 需要定位父级才能移动 */
  21.       position: relative;
  22.     }
  24.     .container > .item > div {
  25.       display: flex;
  26.     }
  28.     .container > .item > div > button {
  29.       width: 100px;
  30.       height: 50px;
  31.       font-size: 1.5rem;
  32.       margin-left: 10px;
  33.     }
  34.   </style>
  35.   <body>
  36.     <div class="container">
  37.       <div class="item">
  38.         jpg-1&nbsp;
  39.         <div>
  40.           <button onclick="up(this)">up</button>
  41.           <button onclick="down(this)">down</button>
  42.         </div>
  43.       </div>
  44.       <div class="item">
  45.         jpg-2&nbsp;
  46.         <div>
  47.           <button onclick="up(this)">up</button>
  48.           <button onclick="down(this)">down</button>
  49.         </div>
  50.       </div>
  51.       <div class="item">
  52.         jpg-3&nbsp;
  53.         <div>
  54.           <button onclick="up(this)">up</button>
  55.           <button onclick="down(this)">down</button>
  56.         </div>
  57.       </div>
  58.     </div>
  59.   </body>
  60.   <script>
  61.     let up = (ele) => (ele.offsetParent.style.order -= 1);
  62.     let down = (ele) => (ele.offsetParent.style.order += 1);
  63.   </script>
  64. </html>
  • 运行效果：

总结

  • 弹性盒子脱离文档流；
  • 弹性盒子中的元素自动成为弹性项目；
  • 剩余空间利用效果根据主轴交叉轴变化；
  • 弹性盒子可以嵌套；
  • 弹性盒子布局属性效果较为相似，要记住结构变化；
上一条：WebSocket即时通讯原理实战下一条：laravel基础-blade模板引擎和中间件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多