个人解决办法：将要设置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. redis参数说明

    感谢网友分享. 1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式运行时,Redis默认会把pid写 ...

  2. MySQL5.7 JSON类型及其相关函数的学习

    mysql> CREATE TABLE `json_table` ( `id` int(11) NOT NULL AUTO_INCREMENT, `info` json NOT NULL, PR ...

  3. Got error -1 from storage engine

    有个小朋友修复从库,但是start slave 后,报错信息如下 Could not execute Write_rows event on table hsfdssdb.mf_textannounc ...

  4. 常用sql语句总结（一）（查询）

    常用sql语句总结(一)(查询) 数据操作语句:DML 数据定义语句:DDL 数据控制语句:DCL (执行顺序------序号) 一.基本查询: 1. SELECT * ----- 2 FROM 数据 ...

  5. 用PIL库进行图像处理

    一.如果系统里没有安装PIL库的,请先到命令提示符输入“pip install pillow”进行安装 二.之后就可以参考以下的代码 from PIL import Image from pylab ...

  6. iOS imageNamed 与 imageWithContentsOfFile 的区别

    imageNamed 方法 1)后面的参数是icon的名字,图片可以存在项目中,也可以存在Asset中 2)该方法只适合一些中小型的图片读取,而一些比较大的资源图片并不适合用这个方法 3)这个方法加载 ...

  7. Vue学习——使用vue-cli搭建一个简单的本地vue项目

    前提 安装好node.js.npm.vue-cli.为什么要先安装这些,建议查看https://www.cnblogs.com/jixue/p/10673875.html,这个对于vue-cli理解很 ...

  8. JS高程13.3事件对象的学习笔记

    1.事件流 事件流描述的是页面中元素接收事件的顺序.比如你单击了某个按钮,他们都认为单击事件不仅仅发生在按钮上,换句话说,在单击按钮的同时,你也单击了按钮的容器元素,甚至还单击了整个页面.那么你到底是 ...

  9. P4233 射命丸文的笔记

    思路 题目要求求的是哈密顿回路的期望数量,实际上就是哈密顿回路的总数/有哈密顿回路的竞赛图的数量 n个点的所有竞赛图中哈密顿回路的总数为 \[ (n-1)! 2^{\frac{n(n-1)}{2}-n ...

  10. HDU 5616 Jam's balance（Jam的天平）

    HDU 5616 Jam's balance(Jam的天平) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K ...