search

博客列表 >flex和grid基础知识

flex和grid基础知识

无声胜有声丶
无声胜有声丶原创
2020年08月15日 00:15:54967浏览

flex实现三列布局

flex实现布局的时候主要是把盒子转为flex弹性盒子，以及把body改为垂直显示并且默认为不换行。

  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实现Pc端三列布局</title>
  7.   </head>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.     /* 把Body转为flex */
  15.     /* 把主轴方向改为垂直显示并且默认为不换行 */
  16.     body {
  17.       width: 500px;
  18.       display: flex;
  19.       flex-flow: column nowrap;
  20.       margin: auto;
  21.     }
  22.     /* 把container也转为flex */
  23.     /* 把主轴上的对齐方式改为剩余空间的两边对齐 */
  24.     .container {
  25.       display: flex;
  26.       min-height: 300px;
  27.       justify-content: space-between;
  28.     }
  29.     .container > aside {
  30.       flex: 0 0 100px;
  31.     }
  32.     .container > main {
  33.       flex: 0 0 200px;
  34.     }
  35.   </style>
  36.   <body>
  37.     <div class="container">
  38.       <aside>左边栏</aside>
  39.       <main>内容区</main>
  40.       <aside>右边栏</aside>
  41.     </div>
  42.   </body>
  43. </html>

flex实现(m.php.cn)首页

  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>php移动端首页</title>
  7.     <link rel="stylesheet" href="../0808/iconfont/iconfont.css" />
  8.     <script src="../0808/iconfont/iconfont.js"></script>
  9.     <link rel="stylesheet" href="/0808/icon.css" />
  10.     <style>
  11.       * {
  12.         margin: 0;
  13.         padding: 0;
  14.       }
  15.       a {
  16.         text-decoration: none;
  17.         color: lightslategray;
  18.       }
  19.       html {
  20.         width: 100vw;
  21.         height: 100vh;
  22.       }
  23.       body {
  24.         min-width: 360px;
  25.         background-color: lightyellow;
  26.         display: flex;
  27.         flex-flow: column nowrap;
  28.       }
  29.       body > header {
  30.         display: flex;
  31.         width: 95vw;
  32.         height: 30px;
  33.         padding: 0 15px;
  34.         color: white;
  35.         background-color: black;
  36.         justify-content: space-between;
  37.         align-items: center;
  38.         position: fixed;
  39.       }
  40.       body > .slider {
  41.         height: 180px;
  42.         margin-top: 30px;
  43.       }
  44.       body > .slider > img {
  45.         width: 100%;
  46.       }
  47.       nav {
  48.         height: 200px;
  49.         display: flex;
  50.         flex-flow: row wrap;
  51.         align-content: space-around;
  52.         margin-top: 10px;
  53.         background-color: floralwhite;
  54.       }
  55.       nav > div {
  56.         display: flex;
  57.         width: 25vw;
  58.         flex-flow: column nowrap;
  59.         align-items: center;
  60.       }
  61.       nav > div svg {
  62.         width: 50%;
  63.       }
  64.       .title {
  65.         color: dimgrey;
  66.         margin-top: 10px;
  67.         font-size: 1.5rem;
  68.         font-weight: normal;
  69.       }
  70.       .hot-goods {
  71.         display: flex;
  72.         margin-top: 10px;
  73.         flex-flow: row wrap;
  74.         background-color: floralwhite;
  75.       }
  76.       .list-goods {
  77.         background-color: floralwhite;
  78.         display: flex;
  79.         flex-flow: column nowrap;
  80.         margin-top: 10px;
  81.       }
  82.       .list-goods > .goods-desc {
  83.         display: flex;
  84.         margin: 10px;
  85.       }
  86.       .list-goods > .goods-desc a:hover {
  87.         color: hotpink;
  88.       }
  89.       .newest {
  90.         display: flex;
  91.         background-color: floralwhite;
  92.         margin-top: 10px;
  93.         flex-flow: row wrap;
  94.       }
  95.       .article {
  96.         flex-grow: 1; /* 填满剩余空间 */
  97.         margin-top: 10px;
  98.         display: flex;
  99.         justify-content: space-between;
  100.       }
  101.       .article > a:hover {
  102.         color: lightcoral;
  103.       }
  104.       footer {
  105.         display: flex;
  106.         position: fixed;
  107.         bottom: 0;
  108.         height: 50px;
  109.         width: 100vw;
  110.         background-color: khaki;
  111.         justify-content: space-around;
  112.         align-items: center;
  113.       }
  114.       footer > a {
  115.         display: flex;
  116.         flex-direction: column;
  117.         align-items: center;
  118.         color: black;
  119.       }
  120.       footer > a > span:first-of-type {
  121.         font-size: 1.2rem;
  122.       }
  123.       footer > a:hover {
  124.         color: lightcoral;
  125.       }
  126.       .box {
  127.         padding: 10px;
  128.       }
  129.     </style>
  130.   </head>
  131.   <body>
  132.     <!-- 顶部 -->
  133.     <header>
  134.       <a href="">LOGO</a>
  135.       <span class="iconfont icon-daohang"></span>
  136.     </header>
  137.     <!-- 轮播图 -->
  138.     <div class="slider">
  139.       <img src="/0808/img/开课.png" alt="" />
  140.     </div>
  141.     <!-- 主导航区 -->
  142.     <nav>
  143.       <div>
  144.         <svg class="icon" aria-hidden="true">
  145.           <use xlink:href="#icon-js"></use>
  146.         </svg>
  147.         <a href="">HTML/CSS</a>
  148.       </div>
  149.       <div>
  150.         <svg class="icon" aria-hidden="true">
  151.           <use xlink:href="#icon-js1"></use>
  152.         </svg>
  153.         <a href="">javaScript</a>
  154.       </div>
  155.       <div>
  156.         <svg class="icon" aria-hidden="true">
  157.           <use xlink:href="#icon-fuwuduan"></use>
  158.         </svg>
  159.         <a href="">服务端</a>
  160.       </div>
  161.       <div>
  162.         <svg class="icon" aria-hidden="true">
  163.           <use xlink:href="#icon-shujuku"></use>
  164.         </svg>
  165.         <a href="">数据库</a>
  166.       </div>
  167.       <div>
  168.         <svg class="icon" aria-hidden="true">
  169.           <use xlink:href="#icon-yidongduan"></use>
  170.         </svg>
  171.         <a href="">移动端</a>
  172.       </div>
  173.       <div>
  174.         <svg class="icon" aria-hidden="true">
  175.           <use xlink:href="#icon-shouce"></use>
  176.         </svg>
  177.         <a href="">手册</a>
  178.       </div>
  179.       <div>
  180.         <svg class="icon" aria-hidden="true">
  181.           <use xlink:href="#icon-ziyuan"></use>
  182.         </svg>
  183.         <a href="">工具</a>
  184.       </div>
  185.       <div>
  186.         <svg class="icon" aria-hidden="true">
  187.           <use xlink:href="#icon-shipinzhibo"></use>
  188.         </svg>
  189.         <a href="">直播</a>
  190.       </div>
  191.     </nav>
  192.     <!-- 推荐课程 -->
  193.     <h2 class="title">推荐课程</h2>
  194.     <div class="hot-goods">
  195.       <div>
  196.         <a href=""><img src="/0808/img/1.jpg" width="49%" /></a>
  197.         <a href=""><img src="/0808/img/2.jpg" width="49%" /></a>
  198.       </div>
  199.     </div>
  200.     <div class="list-goods">
  201.       <div class="goods-desc">
  202.         <a href=""
  203.           ><img src="/0808/img/极速入门.jpg" height="80" width="240"
  204.         /></a>
  205.         <a href="">CI框架30分钟极速入门</a>
  206.       </div>
  207.       <div class="goods-desc">
  208.         <a href=""
  209.           ><img src="/0808/img/前端入门.jpg" height="80" width="240"
  210.         /></a>
  211.         <a href="">2018前端入门-HTML5</a>
  212.       </div>
  213.     </div>
  214.     <!-- 最新更新 -->
  215.     <h2 class="title">最新更新</h2>
  216.     <div class="list-goods">
  217.       <div class="goods-desc">
  218.         <a href=""><img src="/0808/img/10.png" height="80" width="240" /></a>
  219.         <a href="">《我的十年撸码生涯》公益直播课</a>
  220.       </div>
  221.       <div class="goods-desc">
  222.         <a href=""><img src="/0808/img/11.png" height="80" width="240" /></a>
  223.         <a href="">2天速成VueJS免费公益直播课</a>
  224.       </div>
  225.       <div class="goods-desc">
  226.         <a href=""><img src="/0808/img/12.jpg" height="80" width="240" /></a>
  227.         <a href="">PHP代码整洁之道</a>
  228.       </div>
  229.       <div class="goods-desc">
  230.         <a href=""><img src="/0808/img/13.png" height="80" width="240" /></a>
  231.         <a href="">前端课程（五郞八卦棍系列）第一棍：HTML5</a>
  232.       </div>
  233.       <div class="goods-desc">
  234.         <a href=""><img src="/0808/img/14.png" height="80" width="240" /></a>
  235.         <a href="">小皮面板使用视频教程</a>
  236.       </div>
  237.       <div class="goods-desc">
  238.         <a href=""><img src="/0808/img/15.jpg" height="80" width="240" /></a>
  239.         <a href="">从零进入C语言</a>
  240.       </div>
  241.     </div>
  242.     <!-- 最新文章 -->
  243.     <h2 class="title">最新文章</h2>
  244.     <div class="newest">
  245.       <div class="article">
  246.         <a href="">Redis下载并安装</a>
  247.         <a href=""><img src="/0808/img/123.jpg" height="80" width="240" /></a>
  248.       </div>
  249.       <div class="article">
  250.         <a href="">怎样配置nginx禁止目录执行php文件</a>
  251.         <a href=""><img src="/0808/img/52.jpg" height="80" width="240" /></a>
  252.       </div>
  253.       <div class="article">
  254.         <a href="">计算机系统主要有哪些特点</a>
  255.         <a href=""><img src="/0808/img/1234.jpg" height="80" width="240" /></a>
  256.       </div>
  257.       <div class="article">
  258.         <a href="">Python如何与excel结合</a>
  259.         <a href=""><img src="/0808/img/122.jpg" height="80" width="240" /></a>
  260.       </div>
  261.       <div class="article">
  262.         <a href="">Php如何转换字符编码为utf8</a>
  263.         <a href=""><img src="/0808/img/211.jpg" height="80" width="240" /></a>
  264.       </div>
  265.     </div>
  267.     <!-- 页脚 -->
  268.     <footer>
  269.       <a href="">
  270.         <span class="iconfont icon-shouye"></span>
  271.         <span>首页</span>
  272.       </a>
  273.       <a href="">
  274.         <span class="iconfont icon-shipin"></span>
  275.         <span>视频</span>
  276.       </a>
  277.       <a href="">
  278.         <span class="iconfont icon-dibudaohanglan-"></span>
  279.         <span>社区</span>
  280.       </a>
  281.       <a href="">
  282.         <span class="iconfont icon-My"></span>
  283.         <span>我的</span>
  284.       </a>
  285.     </footer>
  286.   </body>
  287. </html>

响应式网路相册

布局代码：

  1.  <body>
  2.     <h1>汽车</h1>
  3.     <div class="container">
  4.       <div class="item">
  5.         <a href=""><img src="/0809/图片3/11.jpg" alt="" /></a>
  6.         <a href="">兰博基尼</a>
  7.       </div>
  8.       <div class="item">
  9.         <a href=""><img src="/0809/图片3/22.jpg" alt="" /></a>
  10.         <a href="">兰博基尼</a>
  11.       </div>
  12.       <div class="item">
  13.         <a href=""><img src="/0809/图片3/33.jpg" alt="" /></a>
  14.         <a href="">兰博基尼</a>
  15.       </div>
  16.       <div class="item">
  17.         <a href=""><img src="/0809/图片3/44.jpg" alt="" /></a>
  18.         <a href="">兰博基尼</a>
  19.       </div>
  20.       <div class="item">
  21.         <a href=""><img src="/0809/图片3/55.jpg" alt="" /></a>
  22.         <a href="">兰博基尼</a>
  23.       </div>
  24.       <div class="item">
  25.         <a href=""><img src="/0809/图片3/66.jpg" alt="" /></a>
  26.         <a href="">兰博基尼</a>
  27.       </div>
  28.       <div class="item">
  29.         <a href=""><img src="/0809/图片3/77.jpg" alt="" /></a>
  30.         <a href="">兰博基尼</a>
  31.       </div>
  32.       <div class="item">
  33.         <a href=""><img src="/0809/图片3/88.jpg" alt="" /></a>
  34.         <a href="">兰博基尼</a>
  35.       </div>
  36.     </div>
  37.   </body>

css代码；

  1.   * {
  2.         padding: 0;
  3.         margin: 0;
  4.         box-sizing: border-box;
  5.       }
  6.       body {
  7.         background-color: lightseagreen;
  8.       }
  9.       a {
  10.         text-decoration: none;
  11.         color: forestgreen;
  12.       }
  13.       h1 {
  14.         color: lightyellow;
  15.         text-align: center;
  16.         font-weight: normal;
  17.         margin-top: 10px;
  18.       }
  19.       .container {
  20.         display: grid;
  21.         padding: 20px;
  22.         min-width: 100vw;
  23.         min-height: 100vh;
  24.         grid-template-columns: repeat(auto-fill, 200px);
  25.         grid-template-rows: repeat(auto-fill, 170px);
  26.         place-content: space-evenly;
  27.         gap: 20px;
  28.       }
  29.       .container img {
  30.         width: 100%;
  31.         text-align: center;
  32.         height: 130px;
  33.       }
  34.       .container > .item {
  35.         display: flex;
  36.         flex-flow: column nowrap;
  37.         align-items: center;
  38.         justify-self: center;
  39.         border-radius: 10px;
  40.         padding: 10px;
  41.         background-color: navajowhite;
  42.       }
  43.       .container > .item:hover {
  44.         box-shadow: 0 0 30px coral;
  45.         width: calc(100% * 1.1);
  46.         background-color: cyan;
  47.       }

12列栅格布局写搜狗搜索引擎

  1.   <body>
  2.     <div class="container">
  3.       <!-- 导航 -->
  4.       <div class="row">
  5.         <div class="item col-12 header">
  6.           <nav>
  7.             <a href="">新闻</a>
  8.             <a href="">网页</a>
  9.             <a href="">微信</a>
  10.             <a href="">知乎</a>
  11.             <a href="">图片</a>
  12.             <a href="">视频</a>
  13.             <a href="">明医</a>
  14.             <a href="">英文</a>
  15.             <a href="">问问</a>
  16.           </nav>
  17.           <nav class="box">
  18.             <a href="">学术</a>
  19.             <a href="">更多</a>
  20.             <a href="">显示卡片</a>
  21.             <button style="color: crimson;">登录</button>
  22.           </nav>
  23.         </div>
  24.       </div>
  25.       <!-- 主体 -->
  26.       <div class="row" style="min-height: 300px;">
  27.         <div class="item col-12 main">
  28.           <img src="/0809/图片3/2.png" alt="" />
  29.         </div>
  30.         <div class="text">
  31.           <input type="text" style="height: 40px; width: 600px;" />
  32.           <button class="submit">搜狗搜索</button>
  33.         </div>
  34.       </div>
  35.       <!-- 页脚 -->
  36.       <div class="row">
  37.         <div class="item col-12 footer">
  38.           <div>
  39.             <img src="/0809/图片3/1.png" alt="" />
  40.             <p>下载搜狗搜索APP</p>
  41.           </div>
  42.           <p class="footlist">
  43.             <a href=""><img src="/0809/图片3/4.png" alt="" />浏览器</a>
  44.             <a href=""><img src="/0809/图片3/5.png" alt="" />网址导航</a>
  45.             <a href=""
  46.               ><img src="/0809/图片3/3.png" style="top: 4px;" alt=""/>搜狗输入法</a
  47.             >
  48.           </p>
  49.         </div>
  50.       </div>
  51.     </div>
  52.   </body>
  1.       @import url(/0809/css/liu.css);
  3.       .header {
  4.         display: grid;
  5.       }
  6.       /* 导航 */
  7.       a {
  8.         text-decoration: none;
  9.         color: burlywood;
  10.       }
  11.       nav > a {
  12.         padding: 10px;
  13.       }
  14.       nav > a:hover {
  15.         color: blue;
  16.       }
  17.       .box {
  18.         grid-column-start: 10;
  19.       }
  20.       /* 主体 */
  21.       .main > img {
  22.         width: 300px;
  23.       }
  24.       .main,
  25.       .footer {
  26.         grid-column-start: 6;
  27.         text-align: center;
  28.       }
  29.       .text {
  30.         grid-column: 6;
  31.         font-size: 10px;
  32.       }
  33.       /* 页脚 */
  34.       .footer > nav > div {
  35.         float: left;
  36.       }
  37.       .footer {
  38.         width: 350px;
  39.       }
  40.       .submit {
  41.         position: relative;
  42.         top: -40px;
  43.         left: 496px;
  44.         width: 103px;
  45.         height: 39px;
  46.         border: none;
  47.         border-top: 1px solid black;
  48.         border-left: 1px solid #ccc;
  49.       }
  50.       .footlist a img {
  51.         position: relative;
  52.         top: 8px;
  53.       }
liu.css
  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  6. body {
  7.   display: flex;
  8.   justify-content: center;
  9.   align-items: center;
  10. }
  12. .container {
  13.   display: grid;
  14.   min-width: 1000px;
  15.   gap: 5px;
  16. }
  17. .container > .row {
  18.   display: grid;
  19.   grid-template-columns: repeat(12, 1fr);
  20.   min-height: 50px;
  21.   gap: 5px;
  22. }
  23. .container > .row > .item {
  24.   padding: 10px;
  25. }
  26. .col-1 {
  27.   grid-column: span 1;
  28. }
  29. .col-2 {
  30.   grid-column: span 2;
  31. }
  32. .col-3 {
  33.   grid-column: span 3;
  34. }
  35. .col-4 {
  36.   grid-column: span 4;
  37. }
  38. .col-5 {
  39.   grid-column: span 5;
  40. }
  41. .col-6 {
  42.   grid-column: span 6;
  43. }
  44. .col-7 {
  45.   grid-column: span 7;
  46. }
  47. .col-8 {
  48.   grid-column: span 8;
  49. }
  50. .col-9 {
  51.   grid-column: span 9;
  52. }
  53. .col-10 {
  54.   grid-column: span 10;
  55. }
  56. .col-11 {
  57.   grid-column: span 11;
  58. }
  59. .col-12 {
  60.   grid-column: span 12;
  61. }

上一条：grid制作12列栅格布局下一条：用户登录验证简单案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议