Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex制作三列布局
Blogger Information
Blog 10
fans 0
comment 0
visits 6232
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制作三列布局
Brain
Original
1074 people have browsed it
  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>flex homework</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       body {
  14.         width: 90vw;
  15.         height: 100vh;
  16.         margin: 0 auto;
  17.       }
  18.       .container {
  19.         display: flex;
  20.         outline: 1px solid red;
  21.         flex-flow: row wrap;
  22.         justify-content: space-between;
  23.         align-content: space-between;
  24.         height: 100vh;
  25.       }
  26.       .container > .item:first-of-type,
  27.       .item:last-of-type {
  28.         flex: 0 0 90vw;
  29.         background-color: lightcyan;
  30.         height: 10vh;
  31.         min-height: 80px;
  32.       }
  33.       .container > .item2,
  34.       item3,
  35.       item4 {
  36.         height: 80vh;
  37.         min-height: 400px;
  38.       }
  39.       .container > .item2,
  40.       .item4 {
  41.         flex: 0 0 20vw;
  42.         background-color: lightyellow;
  43.       }
  44.       .container > .item2 {
  45.         justify-content: flex-start;
  46.       }
  47.       .container > .item4 {
  48.         justify-content: flex-end;
  49.       }
  50.       .container > .item3 {
  51.         flex: 1 1 auto;
  52.         background-color: lightred;
  53.       }
  54.     </style>
  55.   </head>
  56.   <body>
  57.     <div class="container">
  58.       <div class="item item1">弹性盒子布局header</div>
  59.       <div class="item item2">left</div>
  60.       <div class="item item3">main</div>
  61.       <div class="item item4">right</div>
  62.       <div class="item item5">footer</div>
  63.     </div>
  64.   </body>
  65. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：unqualified

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