2301_81146623 2023-12-29 11:27 采纳率: 81.8%
浏览 14
已结题

求这部分的flex布局代码

我自己写的代码总是怪怪的，盒子里面的内容不用，就盒子的flex代码就好，或者给个思路也行，谢谢！

img

  • 写回答

1条回答 默认 最新

  • 秋绥冬禧. 2024-01-09 09:57
    关注

    写一个大盒子里面左右两个小盒子。右边盒子里面放ul li 标签显示八个小盒子，使用flex布局很好实现

    img


    img

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box1 {
      width: 1200px;
      height: 600px;
      display: flex;
    }
    .box2 {
      width: 200px;
      height: 600px;
      background-color: #4e4e4e;
    }
    .box3 {
      width: 960px;
      height: 600px;
      background-color: #bbc594;
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          display: block;
          list-style: none;
          background-color: #e7bfbf;
          width: 180px;
          height: 250px;
          margin: 20px;
        }
      }
    }
  </style>
  <body>
    <div class="box1">
      <div class="box2"></div>
      <div class="box3">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
        </ul>
      </div>
    </div>
  </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

  • Flex布局详解[代码]
    2025-11-18 06:20
    Flex布局简化了响应式网站设计过程，通过较少的代码即可实现复杂的布局效果，并且能够自动调整项目大小以适应不同的屏幕尺寸。 在前端开发中，了解并掌握Flex布局的相关属性和用法对于优化用户体验和提高页面的灵活...
  • Flex布局教程[项目代码]
    2025-11-24 14:50
    Flex布局作为这一趋势的典型代表，已经成为前端开发者必须掌握的布局技术之一。无论是对于初学者还是资深开发者，理解并熟练运用Flex布局都能极大地提高开发效率和页面的视觉表现力。 由于Flex布局的简便性和灵活性...
  • Flex布局详解[项目代码]
    2025-11-12 16:39
    CSS布局中的Flex布局因其强大的灵活性和简洁的代码风格，已经成为现代网页布局的常用技术之一。前端开发者通过掌握Flex布局，可以更好地实现响应式设计，优化用户体验。了解和熟悉Flex布局的各项属性及其用法，是...
  • CSS Flex布局详解[代码]
    2025-11-12 16:51
    CSS Flex布局是一种用于创建灵活的盒模型布局的布局方式，它允许容器内的元素能够自动伸缩以适应可用空间。...通过阅读本文，开发者可以获得关于Flex布局全面而深入的理解，从而在网页设计中游刃有余地使用这一技术。
  • flex布局详解[代码]
    2025-11-15 06:24
    通过文章提供的具体代码示例和效果图，开发者可以直观地看到各种flex值在实际布局中的表现，这对于学习和应用flex布局非常有帮助。实例中展示的代码通常包括对flex容器的设置，以及子元素的flex属性配置，这些都是...
  • Flex布局全面指南[代码]
    2025-11-15 06:55
    学习资源部分则可能提供了相关的在线教程、文档链接和实例代码等，帮助开发者更好地掌握和实践Flex布局。 无论是在简单还是复杂的布局场景中，Flex布局都能够提供简洁和强大的解决方案，是现代前端开发不可或缺的...
  • flex布局深度解析[代码]
    2025-11-24 14:31
    熟练掌握flex布局，对于网页设计师和前端开发者来说，已经成为了一项必备技能。 通过深入解析flex布局的底层逻辑与实战应用，本文为读者提供了一个全面了解flex布局的视角，不仅包括理论知识，也包含了丰富的实际...
  • Flex布局实现左右上下平分[代码]
    2025-11-16 07:28
    实现左右上下平分的Flex布局代码示例通常包括创建一个flex容器，并对其子元素进行样式设置。具体的代码实现方式会根据具体需求的不同而有所差异，但基本原理相同。例如，可以通过将父容器的`display`属性设置为`flex...
  • Flex布局实现扩展卡片[代码]
    2025-11-12 15:42
    Flex布局是一种基于box的概念的布局方式，它允许容器的子元素能够改变其宽度、...本文提供的代码示例和解释，不仅展示了如何构建一个特定的扩展卡片效果，同时也为前端开发者提供了一个学习和实践Flex布局应用的范例。
  • flex布局一行4元素[代码]
    2025-11-20 05:21
    首先，需要将父容器的display属性设置为flex，这一步是启用flex布局模式的前提。接着，通过justify-content属性的设置，可以控制子元素在主轴上的对齐方式，而space-around值正是用来实现子元素之间的均匀间隔，使得...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 1月18日
  • 已采纳回答 1月10日
  • 创建了问题 12月29日