Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex 容器的常用属性与简单案例
Blogger Information
Blog 40
fans 0
comment 1
visits 39801
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 容器的常用属性与简单案例
Dong.
Original
653 people have browsed it

专用于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的强大之处
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：移动端， flex如鱼得水
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