个人解决办法：将要设置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. windows 共享文件

  2. ［转载非常好的文章］JLink+GDBServer调试S3C6410裸板的初始化代码 For OK6410开发板

    要调试裸板,有两种初始化方法,一个是用烧好的uboot初始化,再有就是直接用JLink+GDBServer初始化.代码参考了网上的资料,根据手头的OK6410开发板做了修改.整体代码如下: # Con ...

  3. 从centos镜像创建maven仓库

    创建镜像 1. 使用centos7作为基础镜像2. 将jdk1.8(官方要求1.8)和nexus3解压后的两个文件放进cp进去3. export环境变量后启动一下试一试4. docker commit ...

  4. 微信小程序数组对象

    xml:<block wx:for="{{post_key}}" wx:for-item="{{item}}"></block> dat ...

  5. 《CSS世界》读书笔记（十三）

    <!-- <CSS世界>张鑫旭著 --> margin 无效情形解析 (1)display 计算值 inline 的非替换元素的垂直 margin 是无效的.对于内联替换元素, ...

  6. nodejs基础快速上手

    node 快速了解 hello node.js console.log("hello Node.js"); let http = require("http") ...

  7. MyElasticsearch

    目录 那些必须要知道的事儿 搭建elasticsearch环境 快速上手 elasticsearch分析数据的过程漫谈 建议器:Suggester IK中文分词器 elasticsearch for ...

  8. 小试wsl

    安装 管理员权限运行powershell,执行如下命令: Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Su ...

  9. [c/c++] programming之路（26）、结构体

    一.初始化字符串 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include&l ...

  10. CEF 自定义用户协议(scheme)实现以二进制流的方式显示图片、视频、音频

    转载:https://www.cnblogs.com/sinceret/p/10417941.html 转载:https://stackoverflow.com/questions/48811756/ ...