search

博客列表 >Flex 容器的常用属性与简单案例

Flex 容器的常用属性与简单案例

Dong.
Dong.原创
2020年06月28日 15:44:25652浏览

专用于Flex容器上的常用属性

1.display:flex :

  • 声明是flex box容器
  • 容器内的子元素就会成为弹性项目
  • 弹性项目成为行内块（可以设置宽高度）
  • 有已分配空间与剩余空间概念
  • 弹性盒子有主轴、交叉轴概念 所有弹性项目都会沿主轴排列

2.fex-doirection:row :

  • 设置元素在主轴上是否换行

3.fex-wrap:nowrap :

  • 表示为单行容器，默认值就为nowrap
  • 本质是设置剩余空间与项目的排列方式
  • 可简写 fex-wrap: row nowrap

4.fex-wrap:wrap :

  • 表示为多行容器

5.justfy-content:flex-stary :

  • 控制
  • 当主轴上存在剩余空间时，控制空间在项目上的分配方案

6.align-content:flex-start :

  • 仅适用于多行容器
  • 控制项目的对齐方式

7.align-items:flex-start :

  • 控制项目在交叉轴上 的对齐方式

pc端简单案例

代码示例：

  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>pc端解决方案</title>
  7. </head>
  8. <style>
  9.     /* 初始化 */
  10.     * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     a , p {
  16.         /* 设置字体颜色 */
  17.         color: khaki;
  18.         /* 去除a标签的下划线 */
  19.         text-decoration: none;
  20.     }
  22.     body {
  23.         min-width: 680px;
  24.         /* 当前容器应用flex布局 */
  25.         display: flex;
  26.         /* 主轴垂直方向不换行 */
  27.         flex-flow: column nowrap;
  28.     }
  29.     header {
  30.         height: 60px;
  31.         /* 设置边框 */
  32.         border: 1px solid #000;
  33.         /* 当前容器应用flex布局 */
  34.         display: flex;
  35.         /* 所有项目在交叉轴方向上居中显示 */
  36.         align-items: center;
  37.         /* 背景色 */
  38.         background-color: black;
  39.       }
  40.     header > a {
  41.         flex: 0 1 100px;
  42.         text-align: center;
  43.       }
  45.       /* Logo */
  46.       header > a:first-of-type {
  47.         margin-right: 50px;
  48.       }
  49.       /* 给登录按钮移到最右边 */
  50.       header > a:last-of-type {
  51.         margin-left: auto;
  52.       }
  53.       /* 鼠标悬停时忽略logo 其余字体变亮*/
  54.       header > a:hover:not(:first-of-type) {
  55.         color: #fff;
  56.       }
  57.       .container {
  58.         min-height: 600px;
  59.         /* 左右间隔10像素居中 */
  60.         margin: 10px auto;
  61.         /* 当前容器应用flex布局 */
  62.         display: flex;
  63.         justify-content: center;
  64.       }
  66.       .container > aside,
  67.       .container > main {
  68.           /* 设置1像素边框 */
  69.         border: 1px solid #000;
  70.         padding: 10px;
  71.       }
  72.       .container > aside {
  73.         background-color: dodgerblue;
  74.         flex: 0 0 200px;
  75.       }
  76.       .container > main {
  77.           background-color: forestgreen;
  78.         flex: 0 0 600px;
  79.         margin: 0 10px;
  80.       }
  81.       footer {
  82.         height: 100px;
  83.         border: 1px solid #000;
  84.         display: flex;
  85.         flex-flow: column nowrap;
  86.         text-align: center;
  87.         background-color: dimgray;
  88.       }
  89. </style>
  91. <body>
  92.     <header>
  93.         <!-- 头部 -->
  94.         <a href="">Logo</a>
  95.         <a href="">首页</a>
  96.         <a href="">关于我们</a>
  97.         <a href="">公司荣誉</a>
  98.         <a href="">公司简介</a>
  99.         <a href="">视频下载</a>
  100.         <a href="">学员案例</a>
  101.         <a href="">登录注册</a>
  102.     </header>
  103.     <!-- 主体 -->
  104.     <div class="container">
  105.         <aside>左边栏</aside>
  106.         <main>主体内容区</main>
  107.         <aside>右边栏</aside>
  108.     </div>
  109.     <!-- 尾部 -->
  110.     <footer>
  111.         <p>
  112.             php中文网 ©版权所有   (2018-2022) | 备案号:
  113.             <a href="">皖ICP-18********</a>
  114.           </p>
  115.           <p>中国.合肥市政务新区999号 | 电话: 0551-888999**</p>
  116.     </footer>
  117. </body>
  118. </html>

浏览器显示效果：

移动端解决方案

代码示例：

  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.     <link rel="stylesheet" href="static/css/font-icon.css" />
  7.     <title>移动端布局</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         text-decoration: none;
  16.         color: #000;
  17.       }
  18.       html {
  19.         width: 100vw;
  20.         height: 100vh;
  21.         font-size: 14px;
  22.       }
  23.       body {
  24.         display: flex;
  25.         flex-flow: column nowrap;
  26.       }
  27.       header {
  28.         width: 100vw;
  29.         background-color: #ccc;
  30.         padding: 0 5px;
  31.         /* flex布局 两端对齐 */
  32.         display: flex;
  33.         justify-content: space-between;
  34.         /* 固定位置 */
  35.         position: fixed;
  36.       }
  37.       .slider > img {
  38.         width: 100vw;
  39.       }
  40.       nav {
  41.         margin: 10px 0;
  42.         height: 20vh;
  43.         display: flex;
  44.         /* 转成多行容器 分散对齐 */
  45.         flex-flow: row wrap;
  46.         align-content: space-around;
  47.       }
  48.       nav > div {
  49.         width: 25vw;
  50.         /* 主轴方向转为垂直方向 */
  51.         display: flex;
  52.         flex-flow: column nowrap;
  53.         justify-content: space-around;
  54.       }
  55.       nav > div > a > img {
  56.         width: 60%;
  57.       }
  58.       nav > div > a {
  59.         text-align: center;
  60.       }
  61.       h2 {
  62.         border-bottom: 1px solid #000;
  63.         text-align: center;
  64.       }
  65.       .hot-goods {
  66.         margin: 10px 0;
  67.         display: flex;
  68.         flex-flow: row wrap;
  69.       }
  70.       .hot-goods > .goods-item {
  71.         width: 33vw;
  72.         text-align: center;
  73.       }
  74.       .hot-goods > .goods-item img {
  75.         width: 60%;
  76.       }
  77.       .hot-goods > .goods-item {
  78.         font-size: 0.9rem;
  79.       }
  80.       .goods-list {
  81.         margin: 10px 0;
  82.         display: flex;
  83.         flex-flow: column nowrap;
  84.       }
  85.       .goods-list > .goods-desc {
  86.         display: flex;
  87.         align-items: center;
  88.       }
  89.       .goods-list > .goods-desc img {
  90.         width: 100%;
  91.       }
  92.       .goods-list > .goods-desc a {
  93.         padding-right: 10px;
  94.       }
  95.       footer {
  96.         width: 100vw;
  97.         background-color: #ccc;
  98.         padding: 5px 5px;
  99.         display: flex;
  100.         justify-content: space-around;
  101.       }
  102.       footer > div {
  103.         display: flex;
  104.         flex-flow: column nowrap;
  105.         align-items: center;
  106.       }
  107.     </style>
  108.   </head>
  109.   <body>
  110.     <!-- 页眉 -->
  111.     <header>
  112.       <a href="">LOGO</a>
  113.       <a href=""><span class="iconfont">&#xe61f;</span></a>
  114.     </header>
  115.     <!-- 轮播图 -->
  116.     <div class="slider">
  117.       <img src="static/images/banner.jpg" alt="" />
  118.     </div>
  119.     <!-- 主导航区 -->
  120.     <nav>
  121.       <div>
  122.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  123.         <a href="">京东超市</a>
  124.       </div>
  125.       <div>
  126.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  127.         <a href="">服装百货</a>
  128.       </div>
  129.       <div>
  130.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  131.         <a href="">数码精品</a>
  132.       </div>
  133.       <div>
  134.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  135.         <a href="">优惠券</a>
  136.       </div>
  137.       <div>
  138.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  139.         <a href="">京东超市</a>
  140.       </div>
  141.       <div>
  142.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  143.         <a href="">服装百货</a>
  144.       </div>
  145.       <div>
  146.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  147.         <a href="">数码精品</a>
  148.       </div>
  149.       <div>
  150.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  151.         <a href="">优惠券</a>
  152.       </div>
  153.     </nav>
  154.     <!-- 热销商品区 -->
  155.     <h2>热销商品<span class="iconfont">&#xe60b;</span></h2>
  156.     <div class="hot-goods">
  157.       <div class="goods-item">
  158.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  159.         <p>Apple iphone 11 128G</p>
  160.         <div>
  161.           <span>1111&nbsp;元</span>
  162.           <a href=""><span class="iconfont">&#xe602;</span></a>
  163.         </div>
  164.       </div>
  165.       <div class="goods-item">
  166.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  167.         <p>华为笔记本</p>
  168.         <div>
  169.           <span>1111&nbsp;元</span>
  170.           <a href=""><span class="iconfont">&#xe602;</span></a>
  171.         </div>
  172.       </div>
  173.       <div class="goods-item">
  174.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  175.         <p>海尔洗衣机</p>
  176.         <div>
  177.           <span>1111&nbsp;元</span>
  178.           <a href=""><span class="iconfont">&#xe602;</span></a>
  179.         </div>
  180.       </div>
  181.       <div class="goods-item">
  182.         <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  183.         <p>Apple iphone X 128G</p>
  184.         <div>
  185.           <span>1111&nbsp;元</span>
  186.           <a href=""><span class="iconfont">&#xe602;</span></a>
  187.         </div>
  188.       </div>
  189.       <div class="goods-item">
  190.         <a href=""><img src="static/images/goods5.png" alt="" /></a>
  191.         <p>荣耀手机 128G</p>
  192.         <div>
  193.           <span>1111&nbsp;元</span>
  194.           <a href=""><span class="iconfont">&#xe602;</span></a>
  195.         </div>
  196.       </div>
  197.       <div class="goods-item">
  198.         <a href=""><img src="static/images/goods5.png" alt="" /></a>
  199.         <p>荣耀手机 128G</p>
  200.         <div>
  201.           <span>1111&nbsp;元</span>
  202.           <a href=""><span class="iconfont">&#xe602;</span></a>
  203.         </div>
  204.       </div>
  205.     </div>
  206.     <!-- 商品列表 -->
  207.     <h2>商品列表<span class="iconfont">&#xe64b;</span></h2>
  208.     <div class="goods-list">
  209.       <div class="goods-desc">
  210.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  211.         <a href="">
  212.           [白条什么什么的]随便买信息时代受到极大激发好的
  213.           <span class="iconfont">&#xe602;</span>
  214.         </a>
  215.       </div>
  216.       <div class="goods-desc">
  217.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  218.         <a href="">
  219.           [白条什么什么的]随便买信息时代受到极大激发好的
  220.           <span class="iconfont">&#xe602;</span>
  221.         </a>
  222.       </div>
  223.       <div class="goods-desc">
  224.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  225.         <a href="">
  226.           [白条什么什么的]随便买信息时代受到极大激发好的
  227.           <span class="iconfont">&#xe602;</span>
  228.         </a>
  229.       </div>
  230.       <div class="goods-desc">
  231.         <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  232.         <a href="">
  233.           [白条什么什么的]随便买信息时代受到极大激发好的
  234.           <span class="iconfont">&#xe602;</span>
  235.         </a>
  236.       </div>
  237.     </div>
  238.     <!-- 页脚 -->
  239.     <footer>
  240.       <div>
  241.         <a href=""><span class="iconfont">&#xe60c;</span></a>
  242.         <a href="">首页</a>
  243.       </div>
  244.       <div>
  245.         <a href=""><span class="iconfont">&#xe64b;</span></a>
  246.         <a href="">分类</a>
  247.       </div>
  248.       <div>
  249.         <a href=""><span class="iconfont">&#xe602;</span></a>
  250.         <a href="">购物车</a>
  251.       </div>
  252.       <div>
  253.         <a href=""><span class="iconfont">&#xe64d;</span></a>
  254.         <a href="">登录</a>
  255.       </div>
  256.     </footer>
  257.   </body>
  258. </html>

浏览器样式：

总结

  • flex盒子灵活多变，使用方便
  • flex嵌套也是极其的好使
  • 通过这个导航也感到到了flex的强大之处
上一条：端午作业之仿理工学院学生平台首页下一条：flex学习二：pc端手机端通用解决方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多