flex布局中的问题

最新推荐文章于 2024-07-24 11:16:38 发布
最新推荐文章于 2024-07-24 11:16:38 发布
阅读量431 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/logic51551/article/details/104665675
版权

在进行flex布局时发现父元素的宽度会自动占满上一个父元素宽度的百分之百。如果在不给父元素固定宽高，并且给子元素固定宽高的情况下，子元素是不能撑开父元素的宽高的，这也违背了flex布局的初衷。所以flex布局一般用于宽高固定的父元素
在这里插入图片描述
此时子元素所占空间大于父元素
在这里插入图片描述
此时最下方两个盒子已经溢出父元素了
在这里插入图片描述
给父元素进行溢出隐藏后可直观的观察到，flex布局中的宽高一定是固定的，不会被子元素撑开
在这里插入图片描述

logic51551
关注
flex布局
weixin_57775218的博客
03-08 465
什么是flex布局？ flex是flexible Box的缩写,意为"弹性布局" ,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。 传统布局，传统布局兼容性好 布局繁琐，不能再移动端很好的布局，各项比较麻烦. 相较于flex布局操作方便 ,布局极为简单,移动端应用很广泛，PC端浏览器支持情况较差局限性,IE 11或更低版本,不支持或仅部分支持。 就拿下图如何把三个小方块做成水平排列来说： ...
flex布局引发的问题
sinat_41747081的博客
10-24 475
html代码为： <div class="top"></div> <div class="left-wrap"> <div class="nav"></div> <div class="content"> <p class="title">1</p> &l...
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
最新发布
qq_2511276124的博客
07-24 721
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
【CSS3】flex布局防坑（flex盒子固定宽高带来的问题）
iuukai
11-10 2481
1. 产生问题：弹性子元素内的子元素，设置百分比高会溢出弹性容器 弹性子元素的高度百分百等于父元素的高度，但是却被前面（上面）的兄弟元素挤下来了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
flex弹性布局 子元素高度不撑满父元素高度问题
weixin_46180366的博客
04-17 7607
例如：在项目中会有做多级表格的需求，例如下图，一级数据放在表格左边，数据的多个子项item放在右边，由于数据是动态的所以不固定高度。
flex布局之作用在子元素上的属性
weixin_43465508的博客
03-29 1125
flex-growflex-shrinkflex-basis默认值是，表示不占用剩余的空白间隙扩展自己的宽度扩展来分配左边的空隙子元素宽度 = 子元素宽度+（父元素宽度-子元素宽度）*（小数） 1.2多个元素的时候，0-1之间的数，每个子元素分配与单个的情况不变，大于一的时候按占比来分配 2、flex-shrink -- 收缩比列 默认值 自动收缩 跟容器的大小相同 flex-shrink: 1; 如果是 0 那就不收缩 flex-shrink: 0; 超出父元素的宽度与这个系数做乘法运算
Flex布局
03-29
`align-content`在多行Flex布局中使用，与`align-items`类似，但作用于整个行而不是单个项目。 子元素（项目）的属性主要包括： 1. `order`：设置项目的排列顺序，数值越小越靠前，默认值为0。 2. `flex-grow`：...
flex布局实现上下固定中间滑动的布局方式
11-20
在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于拥有头部、底部固定内容，中间区域需要根据内容多少滚动的场景。以下是如何...
详解微信小程序之scroll-view的flex布局问题
10-17
本文将探讨在微信小程序中使用scroll-view组件时，如何解决flex布局带来的问题。 首先，scroll-view是微信小程序提供的一个视图区域，它可以实现内容的滚动。这对于创建可滚动的列表或者卡片非常有用，尤其是在处理...
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
flex布局兼容性问题小结
01-21
一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志：display: flexbox; or the flex() function or flex-pack property 2012 version 标志：...
flex 布局 子元素不设置宽高，高度撑满父元素的问题
qq_42816270的博客
02-12 1万+
align-items: stretch 子元素不设置宽高，其高度与父元素高度相同
flex布局书写固定宽度
weixin_44432032的博客
07-08 785
<style> .con { display: flex; } .con_left { flex: 0 0 500px; width: 500px; //为了解决兼容性 border-right: 1px solid aqua; } .con_right { flex: 1; } </style> <div class="con"> <div class="con_left">con_left</div> &
css-flex布局
YogaMiller的博客
08-09 796
想写一个左边固定(根据内容撑开)右边自适应的布局(重构) 不知道啥影响的, 右边不会自适应, 没办法, 回来看看flex。
flex布局下父子元素的高度
qq_43111808的博客
06-08 7739
父元素为flex布局时： 没有设置高度的子元素与父元素高度一致。 1，如果父元素设置固定高度，则子元素中没有设置高度的元素将继承父元素的高度； 2，如果父元素没有设置高度，其高度由最高的子元素决定。 代码中可以将.father的高度注释一下对比。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
flex布局：
l_3188868137的博客
03-25 931
flex布局： 步骤： 设置div变成flex盒子 弹性flex、 display：flex； div的子元素发生一些改变 设置flex的盒子 称之为父项 盒子里的子元素 称之为子项 具体变化： 不再区分块级 行内快 行内元素，全都可以设置宽高度 子项默认的宽高度：宽度 由内容撑开 高度 等于父项的高 子项 使用浮动没有效果 无效 使用定位、margin、transform都有效 4.默认情况下 子项总宽度大于父项的宽也不会换行！！！ flex
flex 子元素占满剩余高度 与 flex:1 的子元素 overflow:hidden 失效
热门推荐
Ray_Huang
11-05 2万+
这几天使用flex开发大屏，遇到一个印象比较深的问题就是flex的子元素，在其他兄弟元素的高度不定的情况下，如何占满父元素的剩余空间？ 效果图： 要点就是： 1、父元素要设置display: flex; 2、父元素的主轴方向设置为从上到下flex-direction: column; 3、父元素的高度能确定，不管是定高（height: 500px;），还是 100% 其父元...
在flex布局中呢？
04-28
Flex布局是一种用于网页布局的3模块，它提供了一种灵活的方式来排列和对齐元素。在Flex布局中，父容器被称为Flex容器，而子元素被称为Flex项目。 Flex布局的特点包括： 1. 父容器的display属性设置为flex或inline-flex，将其变为一个Flex容器。 2. 子元素的flex属性可以控制它们在主轴上的分配比例。 3. 可以通过设置Flex容器的justify-content属性来控制子元素在主轴上的对齐方式。 4. 可以通过设置Flex容器的align-items属性来控制子元素在交叉轴上的对齐方式。 5. 可以通过设置Flex容器的flex-wrap属性来控制子元素是否换行。 6. 可以通过设置Flex项目的align-self属性来覆盖父容器的align-items属性，实现单个项目的对齐方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值