个人解决办法：将要设置display：flex的dom外面在套一个div，并且设置宽度，就可以了。

设置position（absolute,fixed）导致flex布局不生效的更多相关文章

  1. 在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

    此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...

  2. 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度

    postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:abs ...

  3. 子元素使用position：fixed,导致他的宽度不能和父元素保持一致的解决方案

    最近在编码过程中,遇到过这样一个问题,代码如下,我们有一个父级,他有一定的宽度,在他的里面有两个子级,其中一个是绝对定位的,且要求他们的宽度都和父级保持一致,然后问题就出现了,我们会发现,有了定位的s ...

  4. 打开input输入的时候,css中position:absolute/fixed定位的时候,定位元素上移问题解决

    1.异常代码 <style> .box{ min-height: 100vh; width: 100%; position: relative; } .position{ position ...

  5. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  6. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  7. position: absolute 如果不设置left, right, top, bottom会在什么位置

    一般我们设置position: absolute都会一起设置left/right/top/bottom, 但是如果不设置, 布局会是什么样子的呢? 直接上图 1.一个大盒子中4个小盒子, 正常文档流布 ...

  8. 物体position:absolute后设置left:50%发生的有趣小事

    今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下 一 准备知识 ①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽 ...

  9. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

随机推荐

  1. JS 画框操作

    Js中,我们有时候需要对图片进行操作,包括画框,其实对于UI前端来说挺简单的,没有网上说的那样复杂,这里说明一下 <div style="width:80%;height:300px; ...

  2. datatable的select()结果直接修改，会体现在表上

    如果你只是要修改DataTable里的DataRow的话没有必要找到它的行号,直接在Select后得到的DataRow上修改就行了,它的修改会直接反映到DataTable上(其实就是直接修改了Data ...

  3. 安装pip、numpy、sklearn

    1)pip安装:https://pip.pypa.io/en/stable/installing/To install pip, securely download get-pip.py. [1]:c ...

  4. js的常见的三种密码加密方式-MD5加密、Base64加密和解密和sha1加密详解总结

    写前端的时候,很多的时候是避免不了注册这一关的,但是一般的注册是没有任何的难度的,无非就是一些简单的获取用户输入的数据,然后进行简单的校验以后调用接口,将数据发送到后端,完成一个简单的注册的流程,那么 ...

  5. [ABP] ASP.NET Zero 5.6.0 之 ASP.NET Zero Power Tools 破解日志

    两个要破解Patch的关键dll名称:AspNetZeroRadToolVisualStudioExtension.dll和AspNetZeroRadTool.dll AspNetZeroRadToo ...

  6. Python中的7种可调用对象

    Python中有七种可调用对象,可调用对象可使用内置函数callable来检测 一.用户自定义的函数: 使用def语句或者lambda表达式创建的函数. 二.内置函数: 使用C语言实现的函数,如len ...

  7. Win7 指定以某个用户运行某个程式

    登陆的是用户A,想要以用户B执行某个程式,可以在cmd命令符下执行以下语句 runas /user:Domain\UserB  /savecred notepad.exe 说明:/user:的后面即为 ...

  8. oracle数据库创建用户

    --4.1 创建表空间 CREATE TABLESPACE mdm_data DATAFILE 'D:\soft\Oracle\oracl\oradata\mdm_data01.dbf' SIZE 3 ...

  9. react初始

    一.一些基础概念 1.框架:基于整个项目的 2.库:在某个模块中单独使用,轻量级的 在vue中,DOM的操作时DOM指令调用js 在react中,所有的DOM 渲染都是由JS完成的 组件基于视图 模块 ...

  10. VC GDI 像素转厘米（英寸）[转发]

    [转载]http://blog.sina.com.cn/s/blog_638dd78201018663.html 函数原型:int GetDeviceCaps(int nIndex); 常用的参数有( ...