flex-grow 在列布局中不起作用
[英] flex-grow not working in column layout
本文介绍了flex-grow 在列布局中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图让 views-cntnr 占用 views-cntnr 和 menubar div 未使用的任何空间.为了实现这一点，我将 flex 显示设置为列方向.然后我将 views-cntnr 的 flex-grow 属性设置为 1.似乎没有做任何事情.JSFiddle
注意:不确定这是否重要，但我有一些嵌套的 flex 显示正在进行.
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="https://code.jquery.com/jquery-2.1.4.js"></script><script src="https://code.jquery.com/jquery-1.11.3.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script><section class="分析"><div class="menubar"><div class="view-ctrls text-center"><div class="btn-group" role="group"><button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleView(0)">R-Theta</button><button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleView(1)">笛卡尔</button><button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleView(2)">纵向</button><button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">控制台</button>
<div id="views-cntnr"><div class="r1"><div id="v1" class="view">V1</div><div id="v2" class="view">V2</div><div id="v3" class="view">V3</div>
<div class="r2"><div id="v4" class="view">V4</div>
<div id="frame-ctrl-cntnr"><div id="frame-num" class="frame-ctrl"># X</div><div id="frame-range-cntnr" class="frame-ctrl"><输入类型=范围">
</节>
CSS
.analysis {显示:弹性；弹性方向:列；}/* 菜单栏 */.菜单栏 {填充:4px 0 4px；背景色:#eee;}/* 菜单栏 *//* 视图 */#views-cntnr {显示:弹性；弹性方向:列；弹性增长:1；}/* 第 1 行 */.r1{显示:弹性；}.r1 .view {弹性增长:1；边框:黑色 1px 实心；边界右:无；}.r1 .view:last-child {右边框:黑色 1px 实心；}/* 第 1 行 *//* 第 2 行 */.r2 .view {边框:黑色 1px 实心；边框顶部:无；}/* 第 2 行 *//* 视图 *//* 框架控制 */#frame-ctrl-cntnr {显示:弹性；}.frame-ctrl {边框:黑色 1px 实心；边框顶部:无；边界右:无；}.frame-ctrl:last-child {右边框:黑色 1px 实心；}#frame-num {宽度:50px；}#frame-range-cntnr {弹性增长:1；填充:4px；}/* 帧控制 */
解决方案
您的代码中的所有内容都运行良好.
唯一的问题是您的弹性容器没有指定高度.因此，高度解析为auto，即内容的高度.
flex-grow 属性在容器中分配空闲 空间.由于容器中没有可用空间，flex-grow 无关紧要.
尝试对您的 CSS 进行这种调整:
.analysis {显示:弹性；弹性方向:列；高度:100vh；}
这告诉 flex 容器是视口的高度.现在容器的高度高于内容的高度，您会注意到 flex-grow 正在发挥作用.
修正小提琴
详细了解大多数元素的 height: auto 默认值.
I am trying to have the views-cntnr take up any space not used by views-cntnr and menubar divs. To achieve this, I have a flex display set to column direction. Then I set the flex-grow property for the views-cntnr to 1. Doesn't appear to be doing anything. JSFiddle
NOTE: Not sure if this matters but I have some nested flex displays going on.
HTML
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<section class="analysis">
<div class="menubar">
<div class="view-ctrls text-center">
<div class="btn-group" role="group">
<button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleView(0)">R-Theta</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleView(1)">Cartesian</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleView(2)">Longitudinal</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">Console</button>
</div>
</div>
</div>
<div id="views-cntnr">
<div class="r1">
<div id="v1" class="view">V1</div>
<div id="v2" class="view">V2</div>
<div id="v3" class="view">V3</div>
</div>
<div class="r2">
<div id="v4" class="view">V4</div>
</div>
</div>
<div id="frame-ctrl-cntnr">
<div id="frame-num" class="frame-ctrl"># X</div>
<div id="frame-range-cntnr" class="frame-ctrl">
<input type="range">
</div>
</div>
</section>
CSS
.analysis {
display: flex;
flex-direction: column;
}
/* MENUBAR */
.menubar {
padding: 4px 0 4px;
background-color: #eee;
}
/* menubar */
/* VIEWS */
#views-cntnr {
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* ROW 1 */
.r1 {
display: flex;
}
.r1 .view {
flex-grow: 1;
border: black 1px solid;
border-right: none;
}
.r1 .view:last-child {
border-right: black 1px solid;
}
/* row 1 */
/* ROW 2 */
.r2 .view {
border: black 1px solid;
border-top: none;
}
/* row 2 */
/* views */
/* FRAME CTRL */
#frame-ctrl-cntnr {
display: flex;
}
.frame-ctrl {
border: black 1px solid;
border-top: none;
border-right: none;
}
.frame-ctrl:last-child {
border-right: black 1px solid;
}
#frame-num {
width: 50px;
}
#frame-range-cntnr {
flex-grow: 1;
padding: 4px;
}
/* frame ctrl */
解决方案
Everything in your code is working fine.
The only issue is that your flex container has no specified height. Therefore, the height resolves to auto, meaning the height of the content.
The flex-grow property distributes free space in the container. With no free space in your container, flex-grow has nothing to do.
Try this adjustment to your CSS:
.analysis {
display: flex;
flex-direction: column;
height: 100vh;
}
This tells the flex container to be the height of the viewport. Now the height of the container is taller than the height of the content, and you will notice flex-grow doing its work.
Revised Fiddle
Learn more about the height: auto default on most elements.
这篇关于flex-grow 在列布局中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
