css3基于伸缩盒模型生成一个小案例

css3基于伸缩模型生成一个小案例

在前面学习了尚硅谷天禹老师的css3内容后，基于伸缩盒模型做的一个小案例，里面使用了 flex 布局，以及主轴切换，以及主轴平分等特性，分为使用css3 伸缩盒模型方式，已经传统的 margin 等实现的两种方式；

效果预览

原型分析

markdown 复制代码

重置样式:
* { 
      font-family: Arial; 
      font-size: 14px; 
      margin: 0; 
      padding: 0; 
      border: none; 
  }
  a { text-decoration: none; }
  ul { list-style: none; }
背景:铺满全屏
头部:
高度 70pX
背景色 rgba(0,0,0,0.7)
左右各种 20px内边距
导航文字:白色文字、1px白色边框、圆角8px、内边距10px、间距20px


中间大导航:
  宽:1000px
  高300px
  在内容区水平垂直居中


大导航里的每一个导航项
  宽:180px
  高度:200px

  
五个大导航，颜色分别为:
  #595CA8;
  #FF9D2E;
  #01A6DE;
  #015E91;
  #1DC128;
  #01A6DE;

结构拆分详解

我们将页面整个元素分为上中结构。

上方（导航头）
设置高度为 70px，里面包含了一个左右的布局，我们需要将容器里面的两个元素左右排列，这个时候我们就需要将整个header 开启伸缩容器，然后设置为主轴对齐方式，左右两边顶到边上，利用justify-content: space-between;
- 侧轴，水平居中，我们只有一行 align-items: center;
中间部分（内容区）
我们需要让中间容器铺满整个视口，中间的导航栏居中对齐；
- 设置外层视口高度（100vh - 70px ) ，将外层变为伸缩容器
- 里面伸缩项目设置 margin:auto 这个时候就水平，垂直对齐了

css3新特性实现

markdown 复制代码

<title>14.案例(方案1)</title>
  <style>
     * { 
        font-family: Arial; 
        font-size: 14px; 
        margin: 0; 
        padding: 0; 
        border: none; 
      }
      a { text-decoration: none; }
      ul { list-style: none; }

      body {
         background-image: url('./images-v1/bg.jpg');
         background-repeat: no-repeat;
      }

      /* 头部 */
      .page-header {
         height: 70px;
         background-color: rgba(0,0,0,0.7);
         padding: 20px;

         display: flex;
         justify-content: space-between;
         align-items: center;
      }

      .page-header ul {
         display: flex;
      }

      .page-header ul li {
         color: white;
         border: 1px solid white;
         border-radius: 8px;
         padding: 10px;
         margin-right: 20px;
      }

      .page-header ul li a {
         color: white;
      }

      .page-header ul li:last-child {
        margin-right: 0;
      }


      /* 中间部分 */
      .container {
         height: calc(100vh - 70px);
         display: flex;
      }

      .content-nav {
         width: 1000px;
         height: 300px;
         margin: auto;
         display: flex;
         justify-content: space-evenly;
         align-items: center;
         
      }

      .content-nav li {
         width: 180px;
         height: 200px;
         
         display: flex;
         flex-direction: column;
         justify-content: space-around;
         align-items: center;
         cursor: pointer;

         transition: 0.2s linear;
         
      }

      .content-nav li:hover {
         box-shadow: 0 0 20px black;
      }

      .content-nav li span {
        font-size: 20px;
        color: white;
      }

      .content-nav li:nth-child(1) {
         background-color: #595CA8;
      }

      .content-nav li:nth-child(2) {
         background-color: #FF9D2E;
      }
      .content-nav li:nth-child(3) {
         background-color: #01A6DE;
      }
      .content-nav li:nth-child(4) {
         background-color: #015E91;
      }
      .content-nav li:nth-child(5) {
         background-color: #1DC128;
      }
      .content-nav li:nth-child(6) {
         background-color: #01A6DE;
      }
    


  </style>
</head>
<body>

    <!-- 头部 -->
    <header class="page-header">
        <a href="#">
           <img src="./images-v1/logo.png" alt="logo">
        </a>
        <ul>
           <li><a href="#">国内校区</a></li>
           <li><a href="#">美国校区</a></li>
           <li><a href="#">加拿大校区</a></li>
           <li><a href="#">英国校区</a></li>
           <li><a href="#">日本校区</a></li>
        </ul>
    </header>


    <!-- 中间部分 -->
    <div class="container">
       <ul class="content-nav">
        <li>
           <img src="./images-v1/item1.png" alt="">
           <span>我的邮箱</span>
        </li>
        <li>
           <img src="./images-v1/item2.png" alt="">
           <span>云服务</span>
        </li>
        <li>
           <img src="./images-v1/item3.png" alt="">
           <span>手机课堂</span>
        </li>
        <li>
           <img src="./images-v1/item4.png" alt="">
           <span>微信服务</span>
        </li>
        <li>
           <img src="./images-v1/item5.png" alt="">
           <span>在线客服</span>
        </li>
     </ul>
    </div>

</body>

css3部分

中间部分使用了一部分css3的新特性，以及使用margin 属性，利用文本居中对齐，所以说我们实现效果是有多种方式，并不是只局限于某一种方案

效果

代码

markdown 复制代码

 <title>14.案例(方案2)</title>
  <style>
     * { 
        font-family: Arial; 
        font-size: 14px; 
        margin: 0; 
        padding: 0; 
        border: none; 
      }
      a { text-decoration: none; }
      ul { list-style: none; }

      body {
         background-image: url('./images-v1/bg.jpg');
         background-repeat: no-repeat;
      }

      /* 头部 */
      .page-header {
         height: 70px;
         background-color: rgba(0,0,0,0.7);
         padding: 20px;

         display: flex;
         justify-content: space-between;
         align-items: center;
      }

      .page-header ul {
         display: flex;
      }

      .page-header ul li {
         color: white;
         border: 1px solid white;
         border-radius: 8px;
         padding: 10px;
         margin-right: 20px;
      }

      .page-header ul li a {
         color: white;
      }

      .page-header ul li:last-child {
        margin-right: 0;
      }


      /* 中间部分 */
      .container {
         height: calc(100vh - 70px);
         display: flex;
      }

      .content-nav {
         width: 1000px;
         height: 300px;
         margin: auto;
         display: flex;
         justify-content: space-evenly;
         align-items: center;
         
      }

      .content-nav li {
         width: 180px;
         height: 200px;
         text-align: center;
         cursor: pointer;
         transition: 0.2s linear;
         
      }

      .content-nav li:hover {
         box-shadow: 0 0 20px black;
      }

      .content-nav li img {
       margin-top: 30px;
      }

      .content-nav li span {
        font-size: 20px;
        color: white;
        display: block;
        margin-top: 20px;
      }

      .content-nav li:nth-child(1) {
         background-color: #595CA8;
      }

      .content-nav li:nth-child(2) {
         background-color: #FF9D2E;
      }
      .content-nav li:nth-child(3) {
         background-color: #01A6DE;
      }
      .content-nav li:nth-child(4) {
         background-color: #015E91;
      }
      .content-nav li:nth-child(5) {
         background-color: #1DC128;
      }
      .content-nav li:nth-child(6) {
         background-color: #01A6DE;
      }
    


  </style>
</head>
<body>

    <!-- 头部 -->
    <header class="page-header">
        <a href="#">
           <img src="./images-v1/logo.png" alt="logo">
        </a>
        <ul>
           <li><a href="#">国内校区</a></li>
           <li><a href="#">美国校区</a></li>
           <li><a href="#">加拿大校区</a></li>
           <li><a href="#">英国校区</a></li>
           <li><a href="#">日本校区</a></li>
        </ul>
    </header>


    <!-- 中间部分 -->
    <div class="container">
       <ul class="content-nav">
        <li>
           <img src="./images-v1/item1.png" alt="">
           <span>我的邮箱</span>
        </li>
        <li>
           <img src="./images-v1/item2.png" alt="">
           <span>云服务</span>
        </li>
        <li>
           <img src="./images-v1/item3.png" alt="">
           <span>手机课堂</span>
        </li>
        <li>
           <img src="./images-v1/item4.png" alt="">
           <span>微信服务</span>
        </li>
        <li>
           <img src="./images-v1/item5.png" alt="">
           <span>在线客服</span>
        </li>
     </ul>
    </div>

</body>

注意部分

经测试，部分浏览器不支持主轴对齐均分方式，justify-content: space-evenly; 请使用谷歌浏览器测试，否则不起作用

总结部分

愿我们每个人都能有一份工匠精神，我们应该给代码赋予生命的神圣任务，该简写就绝不多写无用代码，该加注释就写注释；最终希望我们每个人看他人的代码不在痛苦。

最佳实践

‌移动优先‌：优先使用 Flexbox 实现移动端布局，再通过媒体查询扩展桌面端适配
‌渐进增强‌：对不支持 Flexbox 的浏览器（如旧版 IE）提供传统布局兜底方案
‌语义化约束‌：避免过度嵌套 Flex 容器，合理结合 Grid 布局处理二维复杂场

flex布局解决的问题

‌布局灵活性不足 ‌
传统布局依赖 float、position 和 display 属性组合，难以处理动态内容或未知尺寸元素的排列16。Flexbox 通过主轴和交叉轴的抽象概念，允许容器自动调整子元素的尺寸和位置，实现动态适应能力36。
‌对齐与分布困难 ‌
传统布局中垂直居中、多元素间距均匀分配等场景需复杂计算，而 Flexbox 仅需通过 justify-content、align-items 等属性即可实现多种对齐模式45。
‌响应式适配低效 ‌
传统布局需媒体查询频繁调整，而 Flexbox 内置自适应逻辑（如 flex-wrap 换行、flex-grow 比例分配），简化了不同屏幕尺寸的适配流程28。
‌代码冗余与维护成本高 ‌
Flexbox 通过声明式属性（如 flex-direction 定义方向）替代传统布局的复杂嵌套，减少代码量并提升可维护性