显示: flex元素不能在父级中垂直增长
答案： 在前端开发中，CSS的flex布局是一种强大的布局方式，可以灵活地管理元素在容器中的排列和分布。然而，在使用flex布局时，可能会遇到flex元素在父级中无法垂直增长的问题。
这个问题的原因是，flex元素默认是按照主轴方向进行增长和缩小的，而在垂直方向上无法自动增长。要解决这个问题，可以通过设置父级容器的高度属性或者使用一些特定的flex属性来实现。
- 设置父级容器的高度属性： 可以通过设置父级容器的高度属性为固定值或百分比值来解决。例如，设置父级容器的高度为100%，可以让flex元素在垂直方向上填充整个父级容器。
- 使用flex属性：
可以使用
align-items属性来控制flex元素在交叉轴（垂直方向）上的对齐方式。常用的取值有：flex-start：默认值，元素在交叉轴起始位置对齐；flex-end：元素在交叉轴末尾位置对齐；center：元素在交叉轴中间位置对齐；stretch：默认值，元素在交叉轴上拉伸填充父级容器。- 另外，如果希望让flex元素在垂直方向上自动增长，并且对齐方式为居中对齐，可以同时使用
align-items: stretch和justify-content: center两个属性。
总结起来，要使flex元素能够在父级中垂直增长，可以通过设置父级容器的高度属性或使用align-items属性来控制对齐方式。在实际应用中，可以根据具体的需求选择适合的方法来解决该问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：云服务器 CVM
- 链接地址：https://cloud.tencent.com/product/cvm
- 产品简介：腾讯云服务器（Cloud Virtual Machine，CVM）是一种可弹性伸缩的云计算服务，为用户提供可靠的、高性能、安全的云端计算服务环境。
- 腾讯云产品：轻量应用服务器
- 链接地址：https://cloud.tencent.com/product/lighthouse
- 产品简介：腾讯云轻量应用服务器（Lightweight Application Server，简称Lighthouse）是一款部署和运行简单应用的轻量级计算产品，提供稳定、简单、安全、高性能的轻量应用服务器。
以上是一些腾讯云的产品示例，供参考。请注意，我无法提及其他云计算品牌商的相关产品和信息，因此只能给出腾讯云的示例。
相关·内容
2回答
我有一个网页，我想让其中一个页面在垂直和水平方向上居中，如下所示： <main> This has to be centered both vertically and horizontally</div> min-height: 1000px;
浏览 11提问于2021-02-04得票数 0
1回答
我有一个类似如下的布局： <div style="width:250px"></div></div>
第二个内部div垂直增长，所以我需
浏览 0提问于2018-05-03得票数 0
我还提供了，它准确地显示了粉红色div是如何扩展得太远的，并且没有像预期的那样覆盖屏幕。
<router-outlet></router-outlet>
<ng-component class="d-flex
浏览 1提问于2018-04-20得票数 0
回答已采纳
目前，我有一个带有两个<div>元素的视口:第一个是导航的顶部，第二个是#container，作为我所有内容的容器。该#container设置为flex-grow，以便填充视图的其余部分。我有几个<div>元素，我希望第一个元素#landingPage是容器的全部高度。--> </div></temp
浏览 1提问于2022-04-30得票数 1
我已经将内部div的高度设置为100%，但它的高度仍然是0 0px，但是，我设置的100%宽度是正确工作的，它计算为300 0px，即它的父div的100% )。 background: yellow; height: 100%; position: absolute;
浏览 2提问于2021-08-29得票数 0
回答已采纳
2回答
在父类具有display: flex; flex-direction: column的地方，是否可以使父项的宽度展开以适应比父项更宽的弹性项？值得注意的是，祖父母做，而不是有display: flex，也没有固定的宽度。不过它有一个min-width: 100%。
浏览 0提问于2017-11-14得票数 0
回答已采纳
2回答
挠曲箱柱基网格
、、、
边距在DIVs 之间应该是相等的(垂直和水平)。
//示例II .parent { display:flex；flex-none:none；} .children { flex
浏览 3提问于2018-08-13得票数 1
回答已采纳
flex容器的所有子容器(由display: flex或display: inline-flex指定)都会自动生成flex项。没有flex项的显示属性；相反，我们将其设置为其他值，这取决于我们希望如何布局flex项的子级。因此，如果我在Y元素上将display设置为X值(考虑到Y参与了一个flex上下文，即Y是一个flex )，我是否可以确保始终得到一个像块级元素
浏览 2提问于2016-09-01得票数 14
回答已采纳
2回答
给定以下css，如何在不改变框的垂直高度的情况下将文本垂直对齐到每个彩色框中。如果使用“对齐项:中心”，则将框缩小到字体大小。div>
您可以在这里看到随附的css：
我希望屏幕右侧的按钮(为了区别它们而被颜色为亮蓝色)，与导航条相同的高度，而不管窗口大小如何，文本也要垂直居中
浏览 1提问于2017-01-15得票数 2
回答已采纳
2回答
我对CSS Grid的理解是，它会增长到填充它的父级，但是当父级的大小由一个柔性盒控制时，它似乎不能正常工作。这里发生了什么，是否有任何方法来调整风格，以符合我的预期？">
<div
浏览 0提问于2018-08-22得票数 7
我有一个对话框要显示给用户，除了Mac，该对话框在所有浏览器中都没有任何问题。如何在其他浏览器中显示它如何在Mac 中显示
我试图通过提供一些解决办法来解决这个问题，比如“flex-收缩:0”“flex:auto”，但是似乎没有什么有效的解决办法。angular-material/1.1.4/angular-material.min.js"></script>
<style>
浏览 4提问于2017-05-09得票数 7
2回答
我试图在CSS中设置一个复选框网格，使用尾风CSS。我的问题是，第二个网格框中的复选框是对齐框顶部的，我希望它垂直中心。我添加了背景颜色，所以我可以看到div跨越了前一个网格框的整个高度，但是我无法在包含的div中找到对复选框进行居中的方法。
浏览 9提问于2022-09-03得票数 1
回答已采纳
1回答
我有一列使用flex的块(很明显是垂直运行的)，但是在中间的块中，有三个较小的内部块需要水平运行-我已经尝试了display: inline-block，并将它们的父级设置为display: flex;flex-direction: row。我尝试将它们设置为flex: 0和flex: none，但它们仍然显示在一个列中。block (vertical, has fixed height)
浏览 0提问于2017-03-03得票数 1
高亮显示是通过创建包含匹配的范围，然后围绕自定义元素包装范围的内容来完成的。从我的角度来看，此方法相当于拆分文本节点的文本并手动将其复制到新创建的节点。预发版本的附加功能很好，但是有一种类型的css样式，我无法处理：display: flex; justify-content: space-between。我想保持网页的css完好无损，所以修改元素的样式是不可能的。我已经检查了 API，它也不能处理这种情况。我想知道浏览器的内置ctrl是如何突出显示所有的搜索栏来处理这个问题的。
range.setEn
浏览 5提问于2020-11-22得票数 0
回答已采纳
display: flex;}
display: block;first"><input type="text"></div> </div>在这个示
浏览 1提问于2022-04-14得票数 -2
我在一个外部(父级) div中有一个div。
这个问题似乎是重复的，但事实并非如此。显示:表-单元格：内部元素已经是我的解决方案中的内联块，不能在同一块上保留
浏览 2提问于2019-03-12得票数 0
回答已采纳
我的顶级酒吧有这样的布局：根据设计，所有元素都应该垂直居中，下面是我的代码：
不幸的是，top-bar_right-part没有很好地处理类core_vertical-align (注意左菜单是如何工作的此外，右边部分的元素没有继承正确的高度(上栏)，而左侧菜单就是这样做的。
浏览 5提问于2017-11-16得票数 0
2回答
假设我有一个外部和内部div，其中外部div的大小是固定的(边框大小)，但内部div的大小是未知的。有没有办法给外部div填充，使内部div居中？(使用css/scss) <div class="inner"></div>
width: 50; ....inner { width: ? // <40
浏览 1提问于2017-07-29得票数 0
1回答
我想在我的web表单上使用flex display属性，以便有两个文本字段并排并自动增长以填充空间。我选择使用flex而不是表格布局，因为我想让它们在窗口缩小时移动到自己的行。我使用一个字段集作为flex父元素，每个应该并排“增长”的表单元素都被封装在一个div中(设置为display: inline，这样它们就可以在同一行上)。fieldset { flex</
浏览 0提问于2014-12-09得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
