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

关于前端弹性布局的问题

就是在前端中，比如我有一个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条)

报告相同问题？

  • 关于前端弹性布局的问题 css html 前端
    2022-06-28 17:45
    回答 4 已采纳 你说得是对的，动手验证一下即可，刚好今天写了一个示例，content 既是容器也是项目 <!DOCTYPE html> <html lang="en"> <head&gt
  • 前端布局的flex问题 前端
    2021-09-12 09:31
    回答 1 已采纳 现在我清楚flex布局侧轴有什么用了，不用各位了，但为了我下次提问，又要我采纳这个问题的答案才可以提问题，我采纳自己的答案
  • 前端 | 关于flex布局 css3 前端 前端框架 有问必答
    2022-03-09 20:53
    回答 3 已采纳 .outer>div加个高度就不会撑开，不然flex布局高度自适应的时候，高度会根据内容撑开 .outer>div{ width:200px;
  • [前端案例12]弹性布局与动画
    2023-06-21 10:41
    总结：弹性布局和动画是现代前端开发中的重要工具，它们的结合使得前端设计师能够构建出更具吸引力且响应式的用户界面。通过熟练掌握Flexbox布局和CSS动画，开发者可以创造出更佳的交互体验，满足日益多样化和个性化...
  • 关于前端3d透视的问题 css3 前端
    2023-02-25 13:30
    回答 2 已采纳 该回答内容部分引用GPT，GPT_Pro更好的解决问题CSS3的3D透视，要通过设置父盒子的perspective属性来实现，而不是当前盒子上。这是因为，当一个元素被设置为3D空间时，该元素所有的子元
  • 关于前端里面的请求问题 前端
    2022-08-17 15:08
    回答 3 已采纳 你这个需求,是需要反复调用请求,所以需要将请求封装成一个函数 getBoxw(); function getBoxw() { $.ajax({
  • 关于html前端页面跳转的问题 前端
    2022-07-20 23:03
    回答 2 已采纳 js代码问题，重载页面
  • WEB前端-弹性布局
    2022-10-27 21:11
    蒲竺的博客 3）换行，并反向排列（从下往上排列），wrap-reverse------从...语法：display:flex -------------设置一个弹性容器。url(),临时替换的样式-----需要在url后面加auto。（2）flex-end，在结束位置对齐--------底部对齐。
  • 关于前端请求跨域代理问题 ajax 前端 后端
    2021-08-31 16:41
    回答 3 已采纳 跨域问题有前端的解决方式也有后端的解决方式。
  • 前端框架，关于router的问题 react.js 前端框架
    2021-11-09 20:46
    回答 2 已采纳 第一个是对象解构 :后面的是指定对象类型RouteConfigComponentProps第二个是避免对象无此属性而报错
  • flex弹性盒子布局问题 css css3 前端
    2023-03-01 21:32
    回答 2 已采纳 justify-self 只能用于替换 flex-item 的 justify-content 属性，不能用于替换 flex-container 的 justify-content 属性。要替换 fl
  • [前端案例13]弹性布局与弹性导航栏
    2023-06-21 10:44
    弹性布局，全称为“Flexible Box”布局模块，是CSS3新增的一种布局模式，旨在解决传统盒模型在处理复杂多变的网页布局时所遇到的问题。在弹性布局中，容器可以调整其子元素的宽度、高度以及顺序，以最佳方式填充可用...
  • 关于前端的一个小问题! 前端
    2022-03-07 11:23
    回答 5 已采纳 把下面的src改成上面的不就可以了？
  • 前端布局 Flex（弹性）布局
    2022-10-15 09:00
    满天星567的博客 前端布局中的Flex布局
  • web前端开发常用布局demo
    2018-09-20 15:44
    它解决了传统布局中难以实现的问题，如弹性内容填充和自适应容器尺寸。 5. **CSS Grid与Flexbox结合布局** 在某些复杂场景下，开发者可能会结合使用CSS Grid和Flexbox，利用两者的优势来创建更复杂的布局结构。 6...
  • 没有解决我的问题, 去提问

问题事件

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

悬赏问题

  • ¥15 在若依框架下实现人脸识别
  • ¥15 网络科学导论，网络控制
  • ¥100 安卓tv程序连接SQLSERVER2008问题
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比，为什么Snetinel-2计算的结果最小值特别小，而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误，如何解决？
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本，但是每一行里面数据之间空格数量不同