简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 第八课-flex布局案例练习
Blogger Information
Blog 10
fans 1
comment 0
visits 9803
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
1574 people have browsed it

一、用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做了一个简单的网站后台页面样式，受益匪浅。

Correction status：qualified

Teacher's comments：你的页面看上去超酷
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！