不知道为什么flex-grow：1不工作在我的列布局 [英] Not sure why flex-grow: 1 isn't working in my column layout
问题描述
我试图让 views-cntnr 占用 views-cntnr 和 menubar divs。为了实现这一点，我有一个flex显示设置为列方向。然后我将 views-cntnr 的 flex-grow 属性设置为1.看起来没有做任何事情。 JSFiddle
注意：不确定是否但是我有一些嵌套的flex显示。
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/111.4/jquery-ui.js>< / script>
< section class =analysis>
< div class =menubar>
< div class =view-ctrls text-center>
< div class =btn-grouprole =group>
< button class =btn btn-defaultng-class ={'active-view'：active_views [0]}ng-click =toggleView（0）&按钮>
< button class =btn btn-defaultng-class ={'active-view'：active_views [1]}ng-click =toggleView（1）>笛卡尔< / button&
< button class =btn btn-defaultng-class ={'active-view'：active_views [2]}ng-click =toggleView（2）>纵向< / button&
< button class =btn btn-defaultng-class ={'active-view'：active_views [3]}ng-click =>控制台< / button>
< / div>
< / div>
< / div>
< div id =views-cntnr>
< div class =r1>
< div id =v1class =view> V1< / div>
< div id =v2class =view> V2< / div>
< div id =v3class =view> V3< / div>
< / div>
< div class =r2>
< div id =v4class =view> V4< / div>
< / div>
< / div>
< div id =frame-ctrl-cntnr>
< div id =frame-numclass =frame-ctrl>＃X< / div>
< div id =frame-range-cntnrclass =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 * /
＃ 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 * /
唯一的问题是 你的flex容器没有指定的高度 。因此，高度解析为 auto ，表示内容的高度。
容器中没有额外的空间， flex-grow 无关。
尝试对CSS进行此调整：
html，body {height：100％; }
.analysis {
display：flex;
flex-direction：column;
height：100％;
border：1px black black;
}
我们告诉flex容器是视口的高度。现在容器的高度比内容的高度要高，你会注意到 flex-grow 做它的工作。
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.
With no extra space in the container, flex-grow has nothing to do.
Try this adjustment to your CSS:
html, body { height: 100%; }
.analysis {
display: flex;
flex-direction: column;
height: 100%;
border: 1px dashed black;
}
We're telling 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.
这篇关于不知道为什么flex-grow：1不工作在我的列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
