个人解决办法：将要设置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. 初学javascript《一》break和continue的标签问题

    <script>var iNum = 0;outermost:for (var i=0; i<3; i++) {   for (var j=0; j<3; j++) {     ...

  2. Appium(二)---启动App+模拟滑动

    环境搭建好了,就可以实现基本的操作,比如启动App和模拟滑动.这里我实现的是在真机(乐视1s)上启动抖音App,并滑动抖音的视频列表,代码如下: from appium import webdrive ...

  3. python基础部分----基本数据类型

    0.文章来源:http://www.cnblogs.com/jin-xin/articles/7562422.html 1.数字 2.bool 3.str字符串 3.1.字符串的索引与切片. 索引即下 ...

  4. 【源码】HashMap源码及线程非安全分析

    最近工作不是太忙,准备再读读一些源码,想来想去,还是先从JDK的源码读起吧,毕竟很久不去读了,很多东西都生疏了.当然,还是先从炙手可热的HashMap,每次读都会有一些收获.当然,JDK8对HashM ...

  5. vue项目创建过程

    在使用vue-cli之前,请确认你的电脑已经安装了 node,建议版本在 8.0.0 以上 可以通过node -v 检查版本 1.安装 vue-cli (这里我们确认已安装过node) 1.使用 np ...

  6. python 识别图片上的数字

    https://blog.csdn.net/qq_31446377/article/details/81708006 ython 3.6 版本 Pytesseract 图像验证码识别 环境: (1) ...

  7. 使用grafana provisioning通过配置方式添加datasource和dashboard

    grafana provisioning grafana provisioning (http://docs.grafana.org/administration/provisioning/#prov ...

  8. graph easy绘制ascii简易流程图

    graph-easy 日常我们经常需要画一些简易流程图,但是如果使用visio等工具来作图,一则略显大材小用,二则图片导出后再要粘贴.相比下,如果可以简单的用一些text的图来表达,则会简单的多.比如 ...

  9. jenkins 构建nodejs-pipeline流水风格的任务

    Step3 上图代码如下 node("master"){ //warp([$class:'BuildUser']) {BUILD_USER = BUILD_USER} GIT_NA ...

  10. Java基础学习-Eclipse综述和运算符的使用

    1.Eclipse的概述(磨刀不误砍柴工)       -Eclipse是一个IDE(集成开发环境)         -IDE(Intergrated Development Environment) ...