陌丿尘16 2022-06-28 17:45 采纳率: 90.2%
浏览 41
已结题

关于前端弹性布局的问题

就是在前端中，比如我有一个div盒子，里面包含其他的div和ul，这个div的class叫做info，我在样式里给这个div写上 display: flex;，请问它实现的范围是这个div盒子里变成弹性布局吗？如果我这个div盒子自己也想居中，那么是不是也得把这个div外面包围着它的，也变成弹性布局呢？一直理解不了这块，多谢了

  • 写回答

4条回答 默认 最新

  • 虎子8 2022-06-28 18:54
    关注

    你说得是对的，动手验证一下即可，刚好今天写了一个示例，content 既是容器也是项目

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,body {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    .root {
      display: flex;
      height: 100%;
      background-color: red;
    }
    .nav {
      width: 120px;
      background-color: blue;
    }
    .content {
      flex: 1;
      background-color: green;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .box {
      width: 120px;
      height: 120px;
      background-color: yellow;
    }
  </style>
</head>
<body>
<div class="root">
  <div class="nav"></div>
  <div class="content">
    <div class="box">我是一个盒子</div>
  </div>
</div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

  • [前端案例12]弹性布局与动画
    2023-06-21 10:41
    总结：弹性布局和动画是现代前端开发中的重要工具，它们的结合使得前端设计师能够构建出更具吸引力且响应式的用户界面。通过熟练掌握Flexbox布局和CSS动画，开发者可以创造出更佳的交互体验，满足日益多样化和个性化...
  • WEB前端-弹性布局
    2022-10-27 21:11
    蒲竺的博客 3）换行，并反向排列（从下往上排列），wrap-reverse------从...语法：display:flex -------------设置一个弹性容器。url(),临时替换的样式-----需要在url后面加auto。（2）flex-end，在结束位置对齐--------底部对齐。
  • [前端案例13]弹性布局与弹性导航栏
    2023-06-21 10:44
    弹性布局，全称为“Flexible Box”布局模块，是CSS3新增的一种布局模式，旨在解决传统盒模型在处理复杂多变的网页布局时所遇到的问题。在弹性布局中，容器可以调整其子元素的宽度、高度以及顺序，以最佳方式填充可用...
  • 前端布局 Flex（弹性）布局
    2022-10-15 09:00
    满天星567的博客 前端布局中的Flex布局
  • 【2024】前端学习笔记11-网页布局-弹性布局flex
    2024-10-01 22:30
    丶重明的博客 本文记录了css网页布局的弹性布局flex的基本使用方法
  • 前端的学习-CSS（弹性布局-flex）
    2024-08-02 20:34
    被神捡到的程序员的博客 一：什么是弹性布局-Flex flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 语法： .box{ display: flex; } .box{ display: inline-flex; } 注意，设为 Flex 布局以后，子元素的...
  • 前端 HTML 弹性盒子flex布局
    2024-12-20 21:14
    m0_74824865的博客 Flex布局也叫弹性布局，是的布局模型，非常适合结构化布局，提供了强大的和能力。Flex模型产生浮动布局中的现象，布局网页。设置方式：给元素设置元素可以组成部分：弹性容器弹性盒子主轴：默认在方向侧轴 / 交叉轴...
  • 前端 页面布局
    2024-08-06 17:05
    芝士略略的博客 前端-页面布局
  • 前端必知：21.弹性布局的认识及使用
    2023-07-23 17:15
    小姚学前端的博客 弹性布局（Flexbox）是一种用于创建灵活的、自适应的网页布局的CSS模块。它提供了一种在容器和其中的元素之间建立弹性关系的方式，使得元素能够自动调整其大小、顺序和对齐方式，以适应不同的屏幕尺寸和设备。
  • 前端入门html和css布局
    2023-07-20 16:14
    4. 弹性盒布局（Flexbox Layout）：Flexbox是一种一维布局模型，适用于主轴方向（水平或垂直）的布局，特别适合创建弹性容器内的元素对齐和自适应布局。 5. CSS Grid和Flexbox的结合：这两种布局方式可以互补，为更...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 7月6日
  • 已采纳回答 6月28日
  • 创建了问题 6月28日