search

博客列表 >Chapter9 flex布局

Chapter9 flex布局

无关
无关原创
2020年07月08日 17:27:16552浏览

布局案例

1.1

1.2

  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.     <style>
  8.         header,
  9.         footer,
  10.         aside,
  11.         main{
  12.             background-color: cornflowerblue;
  14.         }
  15.         header,
  16.         footer{
  17.             height: 50px;
  18.         }
  19.         aside,
  20.         main{
  21.             min-height: 400px;
  22.         }
  23.         .wrap{
  24.             width: 1000px;
  25.             border: 1px solid #000;
  26.             overflow: hidden;
  27.             margin: 10px auto;
  28.         }
  29.         aside{
  30.             width: 200px;
  31.             float: left;
  32.         }
  33.         main{
  34.             width: 790px;
  35.             float: right;
  36.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <h2>NO1.基于浮动的二列布局</h2>
  43.     <header>页眉</header>
  44.     <div class="wrap">
  45.         <aside>侧边栏</aside>
  46.         <main>主体区</main>
  47.     </div>
  48.     <footer>页脚</footer>
  49. </body>
  50. </html>

2.1

2.2

  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.     <style>
  8.         header,
  9.         footer,
  10.         aside,
  11.         main{
  12.             background-color: cornflowerblue;
  14.         }
  15.         header,
  16.         footer{
  17.             height: 50px;
  18.         }
  20.          .wrap{
  21.             width: 1000px;
  22.             min-height:500px;
  24.             border: 1px solid #000;
  25.              margin: 10px auto;
  26.              /* 定位父级 */
  27.              position: relative;
  29.         }
  30.         aside{
  31.             width: 200px;  
  32.             min-height: inherit;
  34.             position: absolute;
  35.             top:0;
  36.             left:0;       
  37.         }
  38.         main{
  39.             width: 790px;  
  40.             min-height: inherit;
  41.             background-color:lightblue;
  42.             position: absolute;
  43.             top:0;
  44.             right:0;       
  45.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <h2>NO2.基于定位的二列布局</h2>
  52.     <header>页眉</header>
  53.     <div class="wrap">
  54.         <aside>侧边栏</aside>
  55.         <main>主体区</main>
  56.     </div>
  57.     <footer>页脚</footer>
  58. </body>
  59. </html>

3.1

3.2

  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.     <style>
  8.         初始化
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  14.         }
  15.         :root {
  16.             font-size: 16px;
  17.             color: lightsalmon;
  18.         }
  19.         div{
  20.             border:1px solid lightblue;
  21.             padding: 1rem;
  22.             width: 60rem;
  23.             margin:10px auto;
  24.         }
  25.         div{
  26.             /* 分列显示 */
  27.             column-count:3;
  28.             /* column-rule-style:solid; */
  29.             /* column-rule-width: 1px; */
  30.             /* column-rule-color: red; */
  31.             column-rule:1px solid red;            
  32.         }
  33.         header{
  34.             color:blue;
  35.             font-size: 1.3rem;
  36.          }
  37.     </style>
  38. </head>
  39. <body>
  40.     <header>NO3.内容的多栏显示</header>
  41.     <div>
  42.         【环球网报道】《港区国安法》正式生效后，香港特区维护国家安全委员会及警务处国家安全处随即成立。香港《东方日报》3日消息称，香港保安局局长李家超表示，国安处要面对国家级对手，故由副处长领导，职级是警队六处中最高，凸显其重要地位。李家超透露，一旦处理涉及危害国家安全的恐怖主义活动，国安处可动用其他部门配合，包括“飞虎队”及拆弹专家等，保安局则负责统筹及协调政府各部门及各纪律部队的国安工作，包括海关及入境处，严防危险品及目标人物进入香港。
  43.     </div>
  44. </body>
  45. </html>

4.1

4.2

  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.     <style>
  8.         header,
  9.         footer{
  10.             height: 40px;
  11.             background-color: lightsalmon;
  12.         }
  13.         .container{
  14.             width: 1000px;
  16.             margin:10px atuo;
  17.             border:1px solid red;
  18.             /* 分为三列 */
  19.             column-count: 3;
  21.         }
  22.         aside{
  23.             background-color: lightseagreen;
  24.             min-height: 600px;
  26.         }
  27.         main{
  28.             background-color: limegreen;
  29.             min-height: 600px;
  30.         }
  31.         main{
  32.             column-span:2;
  33.             min-height: 600px;
  35.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <h2>NO4.三列布局</h2>
  42.     <header>header</header>
  43.     <div class="container">
  44.         <aside>left</aside>
  45.         <main>main</main>
  46.         <aside>right</aside>
  47.     </div>
  48.     <footer>footer</footer>
  49. </body>
  50. </html>

5.1

5.2

  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>flexbox弹性盒子布局快速预览</title>
  7.     <style>
  8.         .container{
  9.             width: 300px;
  10.             /* 如果这个容器中的内容要使用lexbox布局，第一步就是必须将此容器转为弹性盒子 */
  11.             /* 弹性容器 */
  12.             display: flex;
  13.         }
  14.         .container > .item{
  15.             /* 一旦将父元素转为弹性容器，内部的子元素会自动成为弹性项目 */
  16.             /* 不管这个项目标签是什么类型，统统转为“行内块” */
  17.             /* 行内：全部一排显示 */
  18.             /* 块：可以摄制组宽，高 */                       
  19.             /* flex:auto; */
  20.             /* width: 60px; */
  21.             /* width: 50; */
  22.             width:120px;
  23.         }
  24.         /* 换行显示 ,多行元素*/
  25.         .container{
  26.             flex-wrap: wrap;
  27.         }
  30. /* 主轴，交叉轴（又名侧轴，列轴，辅助轴） */
  31.     </style>
  32. </head>
  33. <body>
  34.     <h5>NO5.flexbox弹性盒子布局快速预览</h5>
  35. <div class="container">
  36.     <div class="item">1</div> 
  37.     <span class="item" >2</span>
  38.    <a class="item">3</a>
  39.    <a class="item">4</a>
  40.    <a class="item">5</a>
  42.    </div>
  44. </body>
  45. </html>

6.1

6.2

  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>flexbox弹性盒子多行容器</title>
  7.     <style>
  8.         .container{
  9.             width: 300px;
  10.             /* 如果这个容器中的内容要使用lexbox布局，第一步就是必须将此容器转为弹性盒子 */
  11.             /* 弹性容器 */
  12.             display: flex;
  13.         }
  14.         .container > .item{
  15.             /* 一旦将父元素转为弹性容器，内部的子元素会自动成为弹性项目 */
  16.             /* 不管这个项目标签是什么类型，统统转为“行内块” */
  17.             /* 行内：全部一排显示 */
  18.             /* 块：可以摄制组宽，高 */                       
  19.             /* flex:auto; */
  20.             /* width: 60px; */
  21.             /* width: 50; */
  22.             width:120px;
  23.         }
  24.         /* 换行显示 ,多行元素*/
  25.         /* 显示，火狐页面右键-查看元素-查看器-flex */
  26.         .container{
  27.             flex-wrap: wrap;
  28.         }
  31. /* 主轴，交叉轴（又名侧轴，列轴，辅助轴） */
  32.     </style>
  33. </head>
  34. <body>
  35.     <h5>NO6.flexbox弹性盒子多行容器</h5>
  36. <div class="container">
  37. <div class="item">1</div>
  38. <div class="item">2</div>
  39. <div class="item">3</div>
  40. <div class="item">4</div>
  41. <div class="item">5</div>
  42.  </div>
  44. </body>
  45. </html>

7.1

7.2

  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.     <style>
  8.         .container {
  9.             width: 300px;
  10.              /* 显示，火狐页面右键-查看元素-查看器-flex */
  11.             display: flex;
  12.             /* justify-content: 控制所有项目在主轴上的对齐方式; */
  13.             /* 本质是：设置容器中的剩余空间在所有“项目之间”的分配方案 */
  15.             /* 1.容器剩余空间在所有项目“二边”的如何分配，将全部项目视为一个整体 */
  16.             justify-content: flex-start;
  17.             justify-content: flex-end;
  18.             justify-content: center;
  20.             /* 2.容器剩余空间在所有项目“之间”的如何分配 ，将项目视为一个个独立的个体*/
  21.              /* 两端对齐： */
  22.              justify-content: space-between;
  23.              /* 分散对齐：剩余空间在所有项目的两侧平均分配，中间间距是两端间距的2倍*/
  24.              justify-content: space-around;
  25.              /* 所有项目平均分配，空间数=项目数+1 */
  26.              justify-content: space-evenly;
  27.         }
  28.         .container > .item{
  29.             width: 60px;
  30.         }
  33.   </style>
  34. </head>
  35. <body>
  36.     <h5>NO.7 单行容器中的项目对齐方式</h5>
  37.     <div class="container">
  38.         <div class="item">1</div>
  39.         <div class="item">2</div>
  40.         <div class="item">3</div>
  41.     </div>
  43. </body>
  44. </html>

8.1

8.2

  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.     <style>
  8.         .container {
  9.             width: 300px;
  10.             /* 显示，火狐页面右键-查看元素-查看器-flex */
  11.             display: flex;
  12.         /* 多行显示 */
  13.              flex-wrap: wrap;
  14.              height: 120px;
  15.              /* align-content: 设置多行容器中的项目排列; */
  16.               /* 1.容器剩余空间在所有项目“二边”的如何分配，将全部项目视为一个整体 */
  17.              align-content:stretch; 
  18.              align-content: flex-start;
  19.              align-content: flex-end;
  20.              align-content: center;
  21.              /* 2.容器剩余空间在所有项目“之间”的如何分配 ，将项目视为一个个独立的个体*/
  22.              align-content: space-between;
  23.              align-content: space-around;
  24.              align-content: space-evenly;
  25.         } 
  27.          .container > .item{
  28.             width: 60px;
  29.         }
  32.   </style>
  33. </head>
  34. <body>
  35.     <h5>NO.8 多行容器中的项目对齐方式</h5>
  37.     <div class="container">
  38.         <div class="item">1</div>
  39.         <div class="item">2</div>
  40.         <div class="item">3</div>
  41.         <div class="item">11</div>
  42.         <div class="item">12</div>
  43.         <div class="item">13</div>
  44.         <div class="item">21</div>
  47.     </div>
  49. </body>
  50. </html>

9.1

9.2

  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>NO.9 主轴垂直时的项目排列</title>
  7.     <style>
  8.         .container {
  9.             width: 300px;
  10.             height: 150px;
  11.             /* 显示，火狐页面右键-查看元素-查看器-flex */
  12.             display: flex;
  13.             /* 主轴的方向，默认为行 */
  14.             flex-direction: row;
  15.                /* 主轴的方向为列 */
  16.             flex-direction: column;
  17.             /* 项目两边分配 */
  18.             justify-content: space-between;
  20.              justify-content: space-around;
  22.              justify-content: space-evenly;
  23.              /* 项目之间分配 */
  24.              /* align-content: space-between; */
  25.              /* align-content: space-around; */
  26.              align-content: space-evenly;
  27.         }
  29.   </style>
  30. </head>
  31. <body>
  32.     <h5>NO.9 主轴垂直时的项目排列</h5>
  33.     <div class="container">
  34.         <div class="item">1</div>
  35.         <div class="item">2</div>
  36.         <div class="item">3</div>                           
  38.     </div>
  40. </body>
  41. </html>

10.1

10.2

  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>NO10.交叉轴的项目排列</title>
  7.     <style>
  8.         .container {
  9.             width: 300px;
  10.             height: 150px;
  11.             display:flex;
  12.             /* 项目在交叉轴上是自动伸缩的 */
  13.             align-items:stretch ;
  14.             align-items:normal;
  15.             align-items:flex-start;
  16.             align-items:flex-end;
  17.             align-items:center;
  21.         }
  22.         .container > .item{
  23.             width: 60px;
  24.         }   
  25.  </style>
  26. </head>
  27. <body>
  28.     <h5>NO10.交叉轴的项目排列</h5>
  30.     <div class="container">
  31.         <div class="item">1</div>
  32.         <div class="item">2</div>
  33.         <div class="item">3</div>                           
  35.     </div>
  37. </body>
  38. </html>

11.1

11.2

  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>NO11.主轴方向与项目排列的简写</title>
  7.     <style>
  8.         .container {
  9.             width: 300px;
  10.             height: 50px;
  11.             display:flex;
  12.             /* 默认值，不用写出来 */
  13.             /* flex-direction: row; */
  14.             /* flex-wrap: nowrap; */
  15.             /* flex-flow: row nowrap; */
  16.             flex-flow: column wrap;
  17.             flex-flow: column nowrap;
  18.         }
  19.            .container > .item{
  20.             width: 60px;
  21.         }        
  22.   </style>
  23. </head>
  24. <body>
  25.     <h5>NO11.主轴方向与项目排列的简写</h5>
  27.     <div class="container">
  28.         <div class="item">1</div>
  29.         <div class="item">2</div>
  30.         <div class="item">3</div>  
  31.         <div class="item">1</div>
  32.          <div class="item">2</div>
  35.     </div>
  37. </body>
  38. </html>

12.1

12.2

  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>NO12.flex容器属性实战：快速来一个主导航</title>
  7.     <style>
  8.         *{
  9.             padding: 0;
  10.             margin: 0;
  11.             box-sizing: border-box;
  13.         }
  14.         a {
  15.          text-decoration: none;
  16.          color:red;
  17.         }
  18.          nav{
  19.              height: 40px;
  20.              background-color: lightblue;
  21.              padding: 0 50px;
  22.              /* 转为弹性盒布局 */
  24.              display:flex;
  26.          }
  27.           nav a{
  28.               height: inherit;
  29.               line-height: 40px;
  30.               padding: 0 15px;
  31.           }
  32.           nav a:hover{
  33.               background-color: seagreen;
  34.               color:white;
  35.           }
  36.           /* 登录注册放在最右边 */
  37.           nav a:last-of-type{
  38.               margin-left:auto;
  39.           }
  41.          </style>
  42. </head>
  43. <body>
  44.     <h5>NO12.flex容器属性实战：快速来一个主导航</h5>
  45.     <header>
  46.         <nav>
  48.          <a href="">主页</a>
  49.          <a href="">教学视频</a>
  50.          <a href="">社区问答</a>
  51.          <a href="">资源下载</a>
  52.          <a href="">登录/注册</a>                                                       
  55.         </nav>
  56.     </header>
  58. </body>
  59. </html>

13.1

13.2

  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>NO.13 项目属性：order控制项目顺序</title>
  7.     <style> 
  8.  .container {
  9.      width: 300px;
  11.      display: flex;
  12.  }
  13.  .container > .item{
  14.      width: 60px;
  15.  }
  16.  .container> .item:last-of-type{
  17.      /* order:默认是0 */
  18.      order:3;
  19.  }
  20.  .container> .item:last-of-type{
  21.     /* order:默认是0 */
  22.     order:6;
  23. }
  24.    </style> 
  25. </head>
  26. <body>
  27.     <h5>NO.13 项目属性：order控制项目顺序</h5>
  28.        <div class="container">
  29.         <div class="item">1</div>
  30.         <div class="item">2</div>
  31.         <div class="item">3</div>
  32.         <div class="item">4</div>
  34.      </div>                                           
  35.  </body>
  36. </html>

14.1

14.2

  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>NO.14 order案例：调整元素顺序</title>
  7.     <style> 
  8.  .container {
  9.      width: 300px;
  11.      display: flex;
  12.      flex-direction: column;
  13.      /* position: relative; */
  14.  }
  15.  .container > .item{
  17.      border: 1px solid #000;
  18.      padding: 10px;
  19.      display: flex;
  20.      position: relative;
  21.       }
  22.       .container> .item>div{
  23.         display: flex;
  25.       }
  26.    </style> 
  27. </head>
  28. <body>
  29.     <h5>NO.14 order案例：调整元素顺序</h5>
  30.     <div class="container">
  31.         <div class="item">
  32.             image-1.jpg &nbsp;&nbsp;&nbsp;
  33.         <div>
  34.             <button onclick="up(this)">up</button> 
  35.             <button onclick="down(this)">down</button>
  36.         </div>
  37.         </div>
  38.         <div class="item">
  39.             image-2.jpg &nbsp;&nbsp;&nbsp;
  40.         <div>
  41.             <button onclick="up(this)">up</button> 
  42.             <button onclick="down(this)">down</button>
  43.         </div>
  44.         </div>     
  46.         <div class="item">
  47.             image-3.jpg   &nbsp;&nbsp;&nbsp;         
  48.         <div>
  49.             <button onclick="up(this)">up</button> 
  50.             <button onclick="down(this)">down</button>
  51.         </div>
  52.         </div>
  53.      </div>  
  54.      <script>
  55.          let up=(ele)=>(ele.offsetParent.style.order -= 1);
  56.          let down= (ele)=>(ele.offsetParent.style.order += 1);
  57.      </script>                                         
  58.  </body>
  59. </html>
上一条：PHP分支与循环下一条：PHP函数的使用方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
武2020-07-08 18:59:571楼
好的，改过来了。 谢谢老师！