简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >第八课-flex布局案例练习

第八课-flex布局案例练习

弋兮
弋兮原创
2019年11月07日 16:11:261573浏览

一、用flex快速搭建手机端通用页面

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 http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="css/demo.css">
  8.     <title>手机端通用页面</title>
  9. </head>
  10. <body>
  11.     <header>header</header>
  13.     <main>main</main>
  15.     <footer>footer</footer>
  17. </body>
  18. </html>

对应的css如下：

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. body{
  7.     display: flex;
  8.     flex-flow: column nowrap;
  9.     height: 100vh;
  10. }
  12. header,footer{
  13.     display: flex;
  14.     box-sizing: border-box;
  15.     justify-content: center;
  16.     align-items: center;
  17.     background-color: rgb(238, 241, 190);
  18. }
  20. main{
  21.     display: flex;
  22.     box-sizing: border-box;
  23.     justify-content: center;
  24.     align-items: center;
  25.     background-color: rgb(247, 188, 237);
  27.     /* 让main主题区充满剩余空间 */
  28.     flex: 1;
  30.     height: 90vh;
  31. }

预览效果如图：

手抄：

二、flex实现圣杯布局

之前学习过如何实现圣杯布局，但是代码比较繁杂，如果用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 http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="css/demo1.css">
  8.     <title>flex实现圣杯布局</title>
  9. </head>
  10. <body>
  11.     <header>header</header>
  13.     <main>
  14.         <article></article>
  15.         <aside></aside>
  16.         <aside></aside>
  17.     </main>
  19.     <footer>footer</footer>
  21. </body>
  22. </html>

对应css如下：

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     display: flex;
  7.     flex-flow: column nowrap;
  8.     height: 100vh;
  9. }
  11. main{
  12.     display: flex;
  13.     box-sizing: border-box;
  14.     flex-flow: row nowrap;
  15.     flex: 1;
  18. }
  19. article{
  21.     flex: 1;
  22.     box-sizing: border-box;
  23.     background-color: rgb(236, 140, 140);
  24. }
  25. aside:first-of-type{
  26.     width: 50px;
  27.     background-color: rgb(53, 238, 6);
  28.     order: -1;
  29. }
  30. aside:last-of-type{
  31.     width: 50px;
  32.     background-color: rgb(228, 216, 55);
  33. }
  35. header,footer{
  36.     display: flex;
  37.     box-sizing: border-box;
  38.     justify-content: center;
  39.     align-items: center;
  40.     height: 60px;
  41.     background-color: rgb(176, 230, 106);
  43. }
  44. /* 
  45. main>aside:first-of-type{
  46.     order: -1;
  47. } */

预览效果如图：

手抄：

三、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 http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="css/demo3.css">
  8.     <title>flex实现登录居中显示</title>
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <h3>用户登录</h3>
  14.         <form action="" class="fd" id="form" name="form">
  15.             <div><label for="user">用户:</label><input type="text"></div>
  16.             <div><label for="password">密码:</label><input type="password"></div>
  17.             <div><button>提交</button></div>
  18.         </form>
  19.     </div>
  20. </body>
  21. </html>

对应css如下：

  1. *{
  2.     margin: 0;
  3.     padding:0
  4. }
  6. body{
  7.     height: 100vh;
  8.     display: flex;
  9.     flex-flow: column nowrap;
  10.     justify-content: center;
  11.     align-items: center;
  12.     background:linear-gradient(to right bottom,rgb(173, 241, 227),white,rgb(148, 197, 236));
  13. }
  15. .container{
  16.     display: flex;
  17.     flex-flow: column nowrap;
  18.     /* border: 1px solid rgb(7, 10, 17); */
  19.     padding: 5px;
  20.     width: 300px;
  21.     position: relative;
  22.     top: -66px;
  25. }
  27. .container>h3{
  28.     margin: 10px 0;
  29.     font-weight: lighter;
  30.     text-align: center;
  31. }
  33. #form{
  34.     display: flex;
  35.     flex-flow: column nowrap;
  36.     padding: 15px;
  37.     border: 1px solid lightgreen;
  38.     border-radius: 16px;
  39.     background:linear-gradient(to left top,rgb(164, 233, 164),white,rgb(77, 148, 77));
  41. }
  43. #form>div{
  44.     display: flex;
  45.     margin-left: 6px;
  46.     margin-top: 12px;
  47.     margin-bottom: 10px;
  48. }
  50. #form>div>input{
  51.     flex:1;
  53.     line-height: 22px;
  54.     padding-left: 10px;
  55.     border: 0;
  56.     border-radius: 6px;
  57.     margin-left: 8px;
  59. }
  60. .fd:hover{
  61.     background: linear-gradient(to left top, lightcyan, white);
  62.     box-shadow: 0 0 5px #888;
  63. }
  64. form:hover{
  65.     background-color: rgb(6, 7, 7);
  66. }
  68. #form>div>button{
  69.     flex: 1;
  70.     margin-top: 6px;
  71.     border: 0;
  72.     border-radius: 8px;
  73.     height: 22px;
  74.     letter-spacing: 10px;
  75. }
  76. #form>div>button:hover{
  77.     background-color: rgb(196, 240, 75);
  78. }

预览效果如图：

手抄：
四、用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 http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="http://at.alicdn.com/t/font_1451331_wsqywwwzbq.css">
  8.      <link rel="stylesheet" href="css/demo4.css">
  10.     <title>简易网站后台</title>
  11. </head>
  12. <body>
  13.     <header>
  14.         <div class="tb">
  15.             <img src="imgs/logo-dark.png" alt="">
  17.         </div>
  18.         <form action="" class="ss">
  19.             <input type="text" placeholder="请输入关键词搜索">
  20.             <button><i class="iconfont iconsousuo"></i></button>
  21.         </form>
  22.         <div class="content">
  24.         <div class="xx">
  25.            <a href=""><i class="iconfont iconshaixuan"></i>消息</a>
  26.         </div>
  28.         <dic class="help">
  29.             <a href=""><i class="iconfont iconyiwen"></i>Help</a>
  30.         </dic>
  32.         <div class="user">
  33.             <a href=""><i class="iconfont iconyonghuguanli"></i>登录</a>
  34.         </div>
  35.     </div>
  36.     </header>
  37.     <main>
  38.         <article>
  39.             <section>
  40.                     <div class="s1">
  41.                         <p>Weekly Overview</p>
  42.                         <p>date:2019-11-07</p>
  43.                     </div>
  44.                     <div class="s2">
  45.                         <div class="s21">
  46.                             <i class="iconfont iconjishu-line"></i>
  47.                             <div class="s211">
  48.                                 <p>1,252</p>
  49.                                 <p>Downloads</p>
  50.                             </div>
  51.                         </div>
  52.                         <div class="s21">
  53.                                 <i class="iconfont iconjishu-line"></i>
  54.                                 <div class="s211">
  55.                                     <p>203</p>
  56.                                     <p>Sales</p>
  57.                                 </div>
  58.                         </div>
  59.                         <div class="s21">
  60.                                     <i class="iconfont iconjishu-line"></i>
  61.                                     <div class="s211">
  62.                                         <p>274,678</p>
  63.                                         <p>Visits</p>
  64.                                     </div>
  65.                         </div>
  66.                         <div class="s21">
  67.                                         <i class="iconfont iconjishu-line"></i>
  68.                                         <div class="s211">
  69.                                             <p>35%</p>
  70.                                             <p>Conversions</p>
  71.                                         </div>
  72.                         </div>
  74.                     </div>
  76.                     <div class="s3">
  77.                         <div class="s4">
  78.                         <table>
  79.                             <tr class="tr1">
  80.                             <th>ID</th>
  81.                             <th>会员名称</th>
  82.                             <th>已购买货物数量</th>
  83.                             <th>单价</th>
  84.                             <th>消费合计</th>
  85.                         </tr>
  86.                         <tr>
  87.                             <td>1</td>
  88.                             <td>liu</td>
  89.                             <td>3</td>
  90.                             <td>1200</td>
  91.                             <td>3600</td>
  92.                         </tr>
  93.                         <tr>
  94.                                 <td>2</td>
  95.                                 <td>liu</td>
  96.                                 <td>3</td>
  97.                                 <td>1200</td>
  98.                                 <td>3600</td>
  99.                             </tr>
  100.                             <tr>
  101.                                     <td>3</td>
  102.                                     <td>liu</td>
  103.                                     <td>3</td>
  104.                                     <td>1200</td>
  105.                                     <td>3600</td>
  106.                                 </tr>
  107.                                 <tr>
  108.                                         <td>4</td>
  109.                                         <td>liu</td>
  110.                                         <td>3</td>
  111.                                         <td>1200</td>
  112.                                         <td>3600</td>
  113.                                     </tr>
  114.                                     <tr>
  115.                                             <td>5</td>
  116.                                             <td>liu</td>
  117.                                             <td>3</td>
  118.                                             <td>1200</td>
  119.                                             <td>3600</td>
  120.                                         </tr>
  121.                                         <tr>
  122.                                                 <td>6</td>
  123.                                                 <td>liu</td>
  124.                                                 <td>3</td>
  125.                                                 <td>1200</td>
  126.                                                 <td>3600</td>
  127.                                             </tr>
  130.                         </table>
  131.                     </div>
  132.                     </div>
  133.             </section>
  134.         </article>
  135.         <aside>
  136.             <nav>
  137.                 <ul>
  138.                     <li><a href=""><i class="iconfont iconwangzhi"></i>主页</a></li>
  139.                     <li><a href=""><i class="iconfont iconxinzenghuopin">文件</i></a></li>
  140.                     <li><a href=""><i class="iconfont iconkehu"></i>用户</a></li>
  141.                     <li><a href=""><i class="iconfont iconyonghuguanli"></i>设备</a></li>
  142.                     <li><a href=""><i class="iconfont iconxiaoshou"></i>关于</a></li>
  143.                     <li><a href=""><i class="iconfont iconpeizhi"></i>设置</a></li>
  144.                 </ul>
  145.             </nav>
  146.         </aside>
  147.     </main>
  148.     <footer><p>Copyright © 2017.Company name All rights reserved.More Templates 模板之家 - Collect from 网页模板</p></footer>
  149. </body>
  150. </html>

对应css如下：

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     display: flex;
  7.     height: 100vh;
  8.     width: 100vw;
  9.     flex-flow: column nowrap;
  10. }
  11. header,footer{
  12.     height: 60px;
  13.     background-color: rgb(229, 230, 221);
  14.     display: flex;
  15.     /* justify-content: space-between; */
  16.     align-items: center;
  17. }
  18. main{
  19.     display: flex;
  20.     flex: 1;
  21.     background-color: rgb(218, 241, 176);
  23. }
  24. article{
  25.     flex: 1;
  26.     background-color: rgb(210, 221, 221);
  27.     height: auto;
  28. }
  29. aside{
  30.     width: 150px;
  31.     height: auto;
  32.     order: -1;
  33.     background-color: rgb(171, 202, 241);
  34. }
  35. .ss{
  36.     margin: auto 15px;
  37. }
  38. .ss>input{
  39.     line-height: 22px;
  40.     border: 0;
  41.     border-radius: 15px;
  42.     padding-left: 6px;
  43. }
  44. .ss>button{
  45.     margin-left: -20px;
  46.     border: 0;
  47.     height: auto;
  48.     color:white
  50.     padding:5px
  51. }
  52. .tb{
  53.     margin: auto 15px;
  54. }
  55. a{
  56.     text-decoration: none;
  57. }
  58. .xx{
  59.     margin-right: 15px;
  60.     /* margin-left: 50vw; */
  61. }
  62. .help{
  64. }
  66. main>aside>nav>ul{
  67.     list-style-type: none;
  68. }
  69. aside{
  70.     display: flex;
  71.     box-sizing: border-box;
  72.     flex-flow: column nowrap;
  74.     width: 186px;
  75. }
  77. nav{
  78.     display: flex;
  79.     box-sizing: border-box;
  80.     flex-flow: column nowrap;
  81.     flex: 1;
  82.     margin-top: 25px;
  83. }
  84. nav>ul{
  85.     flex: 1;
  86. }
  87. nav>ul{
  88.     text-align: center;
  89.     /* display: flex; */
  90.     box-sizing: border-box;
  91.     /* flex-flow: column nowrap;
  92.     justify-content: center;
  93.     align-content: center; */
  94. }
  95. main>aside>nav>ul>li{
  96.     /* flex: 1; */
  97.     margin-bottom: 20px;
  98.     /* box-sizing: border-box; */
  100.     display: block;
  101.     height: 33px;
  102.     background-color: rgb(171, 202, 241);
  103.     text-align: center;
  105. }
  106. main>aside>nav>ul>li:hover,main>aside>nav>ul>li:active{
  107.     background-color: rgb(222, 243, 210);
  108.     box-shadow: oldlace;
  109. }
  110. main>aside>nav>ul>li>a{
  111.     line-height:33px ;
  112. }
  113. header{
  114.     border-bottom:1px solid lightslategray;
  115.     box-shadow:lightsteelblue;
  116. }
  118. .content{
  119.     display: flex;
  120.     flex: 1;
  121.     justify-content: flex-end;
  122.     padding-right: 25px;
  123. }
  124. .user{
  125.     margin-left:22px
  126. }
  128. article{
  129.     padding: 25px;
  130.     display: flex;
  131. }
  132. article>section{
  133.     background-color: rgb(235, 235, 235);
  134.     height: auto;
  135.     width: 100%;
  136.     display: flex;
  137.     flex-flow: column nowrap;
  138. }
  139. .s1{
  140.     display: flex;
  141.     flex-flow: column nowrap;
  142.     margin: 18px 0 15px 18px;
  143. }
  144. .s1>p:first-of-type{
  145.     margin-bottom: 10px;
  146. }
  147. .s2{
  148.     display: flex;
  149.     flex-flow: row nowrap;
  150.     margin-left: 20px;
  151. }
  152. .s21{
  153.     display: flex;
  154.     width: 250px;
  155.     height: 100px;
  156.     border: 1px solid rgb(85, 87, 85);
  157.     border-radius: 20px;
  158.     margin: 10px auto;
  159.     padding: 6px;
  160.     align-items: center;
  161.     justify-content: space-between;
  163. }
  164. .s21>*{
  165.     margin-left: 30px;
  166. }
  167. .s211{
  168.     margin-right: 30px;
  169. }
  170. footer{
  171.     justify-content: center;
  172. }
  173. .s3{
  174.     flex: 1;
  175.     /* background-color: rgb(109, 99, 99); */
  176.     padding: 6px;
  177.     display: flex;
  178.     justify-content: center;
  179.     align-items: center;
  180. }
  181. .s4{
  182.     display: flex;
  183.     justify-content: center;
  184.     align-items: center;
  185.     flex: 1;
  186. }
  187. table{
  188.     flex: 1;
  189.     box-sizing: border-box;;
  190.     /* border: 1px solid black; */
  191.     width: 100%;
  192.     height: 300px;
  193.     background: linear-gradient(to top,rgb(229, 233, 221),rgb(234, 236, 236));
  194.     /* flex: 1; */
  195.     /* display: flex; */
  196.     padding: 12px;
  197.     /* justify-content: center; */
  198.     /* align-items: center; */
  199.     font-size: 20px;
  200.     letter-spacing: 2px;
  201.     border-collapse:collapse;
  202.     margin: 15px auto;
  203.     justify-content: space-evenly;
  204. }
  205. tr{
  206.     /* display: flex; */
  207.     /* flex: 1; */
  208.     /* margin: 10px; */
  209.     /* flex: 1; */
  210.     /* background-color: rgb(71, 82, 59); */
  211. }
  212. th,td{
  213.     text-align:center;
  215. }

预览效果如图：

五、总结

本节课学习了flex布局的三个小案例，应用到了一下几个css属性：
1.盒模型的实现：display:flex；
2.弹性项目的属性：justify-content、align-items，这两个属性可以快速使弹性元素居中始终居中显示；
3.弹性元素属性：flex-flow（该属性是一种简写有两个值，分别表示弹性元素排列方式与是否换行）、flex（该属性是一种简写，有三个值，分别表示是否增长、是否缩减、基准尺寸）。
最后，应用所学知识，用flex做了一个简单的网站后台页面样式，受益匪浅。

上一条：第八课 Flex实战小案例下一条：前端学习实战案例11-06
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多