简体中文（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布局小案例

brait
brait原创
2019年11月07日 23:47:37714浏览

1. 将课堂介绍了三个小案例, 自己动手写一遍, 再抄一遍

DEMO1：手机端通用布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>手机端通用布局</title>
  6.     <link rel="stylesheet" href="css/style1.css">
  7. </head>
  8. <body>
  9.     <header>PHP中文网</header>
  10.     <main>主体</main>
  11.     <footer>
  12.         <a href="">官网首页</a>
  13.         <a href="">教学视频</a>
  14.         <a href="" class="last-link">工具手册</a>
  15.     </footer>
  16. </body>
  17. </html>

CSS部分：

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. a {
  7.     text-decoration: none;
  8.     color: #555555;
  9. }
  12. body {
  14.     height: 100vh;
  15.     display: flex;
  16.     flex-flow: column nowrap;
  17. }
  19. header, footer {
  20.     box-sizing: border-box;
  21.     background-color: #ededed;
  22.     height: 50px;
  23.     display: flex;
  24.     flex-flow: row nowrap;
  25.     justify-content: center;
  26.     align-items: center;
  27. }
  29. main {
  30.     box-sizing: border-box;
  31.     flex: 1;
  32.     background-color: #ffffff;
  33.     border-top: 1px solid #cccccc;
  34.     border-bottom: 1px solid #cccccc;
  35. }
  37. footer > a {
  38.     /*line-height: 50px;*/
  39.     /*text-align: center;*/
  40.     border-right: 1px solid white;
  41.     flex: 1;
  42.     display: flex;
  43.     justify-content: center;
  44.     align-items: center;
  45. }
  47. footer > a:last-of-type {
  48.     border-right: none;
  49. }

运行效果：


DEMO2:圣杯布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex实现圣杯布局</title>
  6.     <link rel="stylesheet" href="css/style2.css">
  7. </head>
  8. <body>
  9.     <header>头部</header>
  10.     <main>
  11.         <article>内容区</article>
  12.         <aside>左边栏</aside>
  13.         <aside>右边栏</aside>
  14.     </main>
  15.     <footer>底部</footer>
  17. </body>
  18. </html>

CSS部分：

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. body {
  8.     height: 100vh;
  9.     display: flex;
  10.     flex-flow: column nowrap;
  11. }
  13. header, footer {
  14.     box-sizing: border-box;
  16.     background-color: #ededed;
  17.     height: 50px;
  19. }
  21. main {
  22.     box-sizing: border-box;
  23.     flex: 1;
  24.     background-color: #ffffff;
  25. }
  28. main {
  29.     display: flex;
  30. }
  32. main > aside {
  33.     box-sizing: border-box;
  35.     width: 200px;
  36.     background-color: wheat;
  37. }
  39. main > article {
  40.     box-sizing: border-box;
  41.     flex: 1;
  42.     background-color: lightblue;
  43. }
  45. main > aside:first-of-type {
  47.     order: -1;
  48. }

运行效果：


DEMO3:酷炫的登录界面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性布局实现登录表单</title>
  6.     <link rel="stylesheet" href="css/style3.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10.     <h3>管理员登陆</h3>
  11.     <form action="">
  12.         <div>
  13.             <label for="email">邮箱:</label>
  14.             <input type="email" id="email" name="email" placeholder="example@email.com">
  15.         </div>
  16.         <div>
  17.             <label for="password">密码:</label>
  18.             <input type="password" id="password" name="password" placeholder="不少于6位">
  19.         </div>
  20.         <div>
  21.             <button>提交</button>
  22.         </div>
  23.     </form>
  24. </div>
  26. </body>
  27. </html>

CSS部分

  1. * {
  2.     padding: 0;
  3.     margin: 0;
  5. }
  7. body {
  9.     display: flex;
  10.     height: 100vh;
  11.     flex-flow: column nowrap;
  12.     justify-content: center;
  13.     align-items: center;
  14.     color: #444;
  15.     font-weight: lighter;
  16.     background: linear-gradient(to top, lightcyan, white, lightcyan);
  17. }
  20. .container {
  21.     box-sizing: border-box;
  22.     width: 300px;
  23.     padding: 20px;
  24.     position: relative;
  25.     top: -60px;
  26. }
  29. .container > h3 {
  30.     text-align: center;
  31.     margin-bottom: 15px;
  32.     font-weight: lighter;
  33. }
  36. .container > form {
  37.     display: flex;
  38.     flex-flow: column nowrap;
  39.     border: 1px solid gray;
  40.     padding: 15px;
  41.     border-radius: 10px;
  42.     background: linear-gradient(to right bottom, lightblue, white);
  44. }
  46. .container > form:hover {
  47.     background: linear-gradient(to left top, lightcyan, white);
  48.     box-shadow: 0 0 5px #888;
  49. }
  50. .container > form > div {
  52.     display: flex;
  53.     margin: 10px 0;
  54. }
  57. .container > form > div > input {
  58.     flex: 1;
  59.     margin-left: 10px;
  60.     padding-left: 6px;
  61.     border: 1px solid #888;
  62.     border-radius: 8px;
  64. }
  66. .container > form > div > button {
  68.     flex: 1;
  69.     background-color: lightseagreen;
  70.     color: white;
  71.     height: 24px;
  72.     letter-spacing: 15px;
  73.     border: none;
  74.     border-radius: 8px;
  75. }
  77. .container > form > div > button:hover {
  78.     background-color: lightcoral;
  79.     box-shadow: 0 0 5px #888;
  80. }

运行效果：



2. 自己根据自己情况, 自定义一个小案例, 使用flex实现, 例如网站后台首页

demo：仿网易邮箱登录界面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>仿某易邮箱</title>
  6.     <link rel="stylesheet" href="css/style.css">
  7. </head>
  8. <body>
  9.     <header>网易邮箱中文邮箱第一品牌</header>
  10.     <main>
  12.         <div class="log">
  13.             <h2>邮箱账号登录</h2>
  14.             <form>
  15.                 <div>
  16.                     <label for="email">邮箱</label>
  17.                     <input type="email" id="email" name="email" placeholder="example@163.com">
  18.                 </div>
  19.                 <div>
  20.                     <label for="password">密码</label>
  21.                     <input type="password" id="password" name="password" placeholder="不少于6位数">
  22.                 </div>
  23.                 <div>
  24.                     <button>登录</button>
  25.                 </div>
  26.                 <div>
  27.                     <a href="">注册新账户</a>
  28.                 </div>
  29.         </form>
  30.         </div>
  32.     </main>
  33.     <footer>
  34.         <a href="">网易首页</a>
  35.         <a href="">网易严选</a>
  36.         <a href="">网易有钱</a>
  37.         <a href="">政府公益热线</a>
  38.         <a href="">隐私政策</a>
  39.     </footer>
  42. </body>
  43. </html>

CSS部分：

  1. *{
  2.     padding: 0;
  3.     margin: 0;
  5. }
  7. body{
  8.     height: 100vh;
  10.     /*将整个页面转为弹性盒子FlexBox*/
  11.     display: flex;
  12.     /*主轴垂直且不换行*/
  13.     flex-flow: column nowrap;
  15. }
  17. main{
  19.     background: linear-gradient(to right , #0033ff,#0099ff,#0033ff);
  20.     display: flex;
  21.     flex: 1;
  23.     justify-content: center;
  24.     align-items: center;
  27. }
  30. main > div {
  32.     height : 500px;
  33.     width :  400px;
  34.     display: flex;
  35.     flex-flow: column nowrap;
  36.     background-color: white;
  37.     position: relative;
  38.     right: -300px;
  41. }
  43. main > div > h2{
  45.     margin-top:30px;
  46.     margin-bottom:30px;
  47.     text-align: center;
  49. }
  51. form > div {
  52.     display: flex;
  53.     padding: 13px;
  56. }
  60. form > div >input {
  62.     flex:1;
  63.     margin-left: 10px;
  64. }
  66. form > div > button {
  68.     flex: 1;
  69.     background-color:rgb(0, 102, 255);
  70.     color: white;
  71.     height: 24px;
  72.     letter-spacing: 25px;
  73.     border: none;
  74.     border-radius: 8px;
  75. }
  77. button:hover{
  79.     box-shadow: 0 0 5px #888;
  80. }
  82. form > div:last-of-type {
  83.     justify-content: center;
  84.     align-items: center;
  86. }
  88. form > div > a{
  89.     text-decoration: none;
  90. }
  92. header,footer{
  93.     height: 70px;
  95. }
  97. footer{
  98.     display: flex;
  99.     justify-content: center;
  100.     align-items: center;
  101. }
  103. footer > a {
  104.     text-decoration: none;
  105.     display: flex;
  106.     flex: 1;
  107.     border-right: 1px solid lightgray;
  108.     justify-content: center;
  109.     align-items: center;
  110. } 
  112. footer > a:link{
  113.     color: gray;
  114. }
  116. footer > a:visited{
  117.     color: gray;
  118. }
  120. footer > a:last-of-type{
  121.     border-right: none;
  122. }

效果对比


总结：吧标签设置成弹性盒子，再对弹性盒子进行定义。这种方法写网页结构要简单一些，最主要的是层层嵌套的盒子不要混淆。最后，网易估计要恨死我了，模仿的那么丑。。。

上一条：flex客堂案例-php九期线上培训班下一条：Flex弹性盒子布局－第九期（191106作业）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多