解决display：flex布局出现的问题

已于 2022-03-31 09:26:29 修改
阅读量2.3k 收藏 2
点赞数
文章标签： css3 css html
于 2022-03-18 10:39:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48687415/article/details/123425601
版权

1.页面实现过程中，有时候会希望页头或者页尾fixed固定布局，但是固定布局之后，会将元素的一些内容遮挡掉
原因：使用了display：fixed布局之后，元素会浮动起来，不再占有以前的位置，解决的方法就是在这个元素外层在包裹一个等高度的元素，外层元素只需要设置一个高度就可以了，里面的内容元素按照样式设置就行

还是display：flex布局的问题
当外层元素设置display：flex后，里面的元素横向排版，超出屏幕范围，最后一个元素的margin-right不显示
解决方法：1.可以在最后设置一个宽度和margin-right等宽度的的元素
2.还有一个就是在外层元素设置margin，里面的元素就不设置
在这里插入图片描述
类似于这样的，之后元素就会占一个屏幕，超出部分滚动条显示

3.在使用浮动布局的时候，有个元素并排显示，其中一个元素被撑开，有一个没有，但是想要没有撑开的高度也变化，
所以这个时候使用float布局是不能实现的，要在这两个元素的外层使用display：flex布局，就可以使没有被撑开的元素高度也发生变化

橘子和其他
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
display: flex text-align align-items justify-content 居中测试过程
morning1216的博客
07-12 2065
display: flex text-align align-items justify-content 居中测试过程 刚刚接触HTML CSS，想记录一下我自学中遇到的很小白的问题。 此次练习的目的是将下图中2222水平竖直居中在浅灰色方块中。 遇到的问题是使用display: flex之后，text-align居中失效。使用了align-items justify-content之后虽然效果达到了，但是很好奇为什么text-align居中失效，经过几次测试，本小白大概搞懂了。我个人来说，各种概念看过之后
display: flex弹性布局
10-12
display: flex弹性布局
【display:flex】弹性布局，父元素设置display:flex后子元素的宽度太大撑大了父元素的宽度
热门推荐
weichun
03-20 2万+
最近做一个现货平台的项目，需要展示的数据超多，不是table就是chart，布局需要弹性自适应，所以使用了css3的flex布局方案。 先看下界面： 就上边界面来说，主要分左右两大部分，各部主体都是table，用的是ant-design的table插件。主要需求是页面布局要弹性，右边表格的中间部分（如果所示，其中的“1月可买卖”，“2月可买卖”，......“11月可买卖”，“12月可买卖”）...
html 清除flex,清除display:flex样式
weixin_39915267的博客
06-17 9980
一、页面行排列布局像此图左右两个div一排显示可以用浮动的布局方式html部分左侧区域右侧区域css部分.main .left,.main .right{border: 1px solid #FE6464;height: 200px;text-align: center;line-height: 200px;color: #FE6464;font-size: 30px}.left{width: 4...
探秘Flex布局下子元素宽度超出的那些烦心事
ljgllxyz的专栏
05-07 790
嘿，小伙伴们！你们有没有遇到过用Flex布局的时候，子元素的宽度莫名其妙地超出了父元素的情况？别着急，今天我就来给大家揭秘这个问题的来龙去脉，以及一些解决方案。让我们一起来深入探讨！
vue使用插槽slot的过程中，父级组件设置了display：flex，但是插入组件的flex：1属性不生效
weixin_43311389的博客
12-17 2741
在用vue开发组件的时候，我预期的效果是这样的 但是实际开发的过程中出现了子组件始终不能均匀分布的问题，flex：1属性根本没生效，如下效果： 于是仔细检查每一处： App.vue TabBar组件 TabBarItem组件 发现了问题： 在TabBarItem组件的template中多嵌套了一层div，这是模板自动生成的我没有删除，导致实际的html机构是这样的： 这样的flex是肯...
scroll-view使用display:flex无效，可采用另外一种方法实现横向滑动
Concise200的博客
05-12 2693
最近在学小程序开发，试着用scroll-view进行横向滚动 竖向滚动很简单，只需要添加scroll-y吗，如何给父盒子添加height属性即可 WXML如下 <scroll-view class='container1' scroll-x> <view>A</view> <view>B</view> <view>C</view> </scroll-view> WXSS如下 /* pag
使用 “display: flex；justify-content: center；align-items: center； ” 解决流式栅格布局无法居中的问题
烟溪彭于晏的博客
07-24 1400
流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局 使用了两行格栅布局，每个格栅的列数为 6 ，一行四个格栅刚好 4 X 6 = 24 然和展现出来的结果并不满意 左偏移了尝试了很多办法去居中 但是没有用认真思考了一下 ， 格栅 24 刚刚好的 ，为什么会不居中呢 ？因为一个格栅装一个图片 但是格栅大于图片 不居中的原因是因为格栅大于图片 而图片是靠着格栅左侧摆放的 如下图知道原因后就好办了 只需把每一个格栅里面的< view > 加上这样的样式 搞定......
使用flex进行水平居中的一个问题
longtengg1的博客
09-02 680
对父元素使用flex，能快速使其中的子元素水平居中， .container { display: flex; flex-direction: column; align-items: center; } 但是这样会是的子元素中的块元素，默认充满一行的100%失效，需手动为子元素设置宽度。 然而去掉align-items: center;后，块元素又能100%占满一行了。 ...
display：flex布局语法
11-20
flex 弹性盒子布局语法，关于廖雪峰老师网站学习笔记的分享，
详解CSS中的display:flex||inline-flex属性|56375.pdf
12-12
任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
flex布局兼容性问题小结
01-21
一.W3C各个版本的flex 2009 version 标志：display: box;...标志：display: flex/inline-flex; and flex-{*} properties 2014 version 新增了对flex项z-index的规定 2015 W3C Editor’s Draft 没有大的改动
浅谈CSS3中display属性的Flex布局的方法
09-24
`Flex布局`，全称`Flexible Box`，旨在为盒状模型提供更为便捷、全面且响应式的布局解决方案。 当一个元素的`display`属性被设置为`flex`时，它就变成了一个`Flex容器`，其所有直接子元素称为`Flex项目`。容器有两...
html flex上下居中,css - Flexbox不在IE中垂直居中
weixin_34883093的博客
06-19 138
css - Flexbox不在IE中垂直居中我有一个简单的网页，其中包含一些以页面为中心的Lipsum内容。 该页面在Chrome和Firefox中运行良好。 如果我缩小窗口的大小，内容将填充窗口，直到它不能，然后添加滚动条并将内容从屏幕填充到底部。但是，该页面不在IE11中。 我可以通过弯曲身体让页面在IE中居中，但是如果我这样做，那么内容开始从屏幕上移到顶部并切断内容的顶部。以下是两种情况...
display: inline-block 和 flex冲突解决办法
qq_33256701的博客
12-20 5066
在做H5的横向滑动时需要设置子元素为行内元素，同时又需要用flex 来做垂直居中显示，发现display有个inline-flex属性 .x-scroll { overflow: scroll; white-space: nowrap; .item { display: inline-flex;//将inline-block改为这个 } &::-webkit-scrollbar { display: none; } } ...
jsp中引用Flex导致部门控件被挡住，解决办法
maming1204的博客
05-21 170
工作内容：jsp页面中要引用一个flex的曲线图，使用iframe。引用进来之后，日期控件被 覆盖的很大一部分。 解决办法：flex的引用有3中方式，window 模式，Opaque 模式，Transparent 模式默认是第一张方式，这种方式无论设置zIndex负多少flex都会遮挡日期控件，原因大致是flex加载与html表面。所以要采用其他方式就可以了。 参考地址：http://kb.c...
flex布局，数据列展示，并居中，页面缩放样式错乱
qq_43393995的博客
09-19 993
页面缩放时，样式错乱了，解决方案是我在最外层包了一层div，样式的话就是上面.body,我所理解的是，在外面用容器包裹住，那么页面进行缩放 的时候就容器大小会整体改变，但是不会影响容器里面的样式。元素居中，margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right。因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）
li标签内使用display：flex 导致li标签失去标号
爱吃红豆的猫
08-29 897
li标签内使用display：flex 导致li标签失去标号
元素使用 align-items center 和 overflow auto 之后，部分内容显示不全
左不言的博客
06-29 3251
当我们为了让内容居中使用了 align-items center 属性之后，因为屏幕小的会遮挡一部分内容我们就会给盒子再加上 overflow-y auto 这个属性但是当我们缩小屏幕时，会发现，内容的上半部分会显示不出来 这是因为元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同参考文档：align-items - CSS（层叠样式表） | MDN 2. 将 display flex 改为 display grid...
display：flex布局
最新发布
06-01
display: flex 是一种 CSS 布局方式，它可以将一个容器元素的子元素按照一定规则排列和定位。通过 flex 布局可以实现页面布局、水平垂直居中、弹性伸缩等功能。具体来说，使用 display: flex 可以让容器元素成为一个 flex 容器，它的所有子元素将成为 flex 项目。在 flex 布局中，有三个重要的概念：flex 容器、flex 项目和 flex 轴。 - flex 容器：将 display 属性设置为 flex 的元素。 - flex 项目：容器元素的子元素。 - flex 轴：指 flex 容器的主轴和交叉轴。 在 flex 布局中，可以通过设置容器元素的 justify-content 和 align-items 等属性来控制子元素在主轴和交叉轴上的对齐方式和排列方式。此外，flex 布局还支持弹性伸缩，即可以通过设置 flex-grow、flex-shrink 和 flex-basis 等属性来控制子元素在容器内的伸缩比例和基础大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值