我试图让 views-cntnr
占用 views-cntnr
和 menubar
div 未使用的任何空间。为此,我将 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/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 */
最佳答案
您的代码中的所有内容都运行良好。
唯一的问题是您的 flex 容器没有指定高度。因此,高度解析为 auto
,表示内容的高度。
flex-grow
属性在容器中分配空闲 空间。由于容器中没有可用空间,flex-grow
无事可做。
尝试对您的 CSS 进行这种调整:
.analysis {
display: flex;
flex-direction: column;
height: 100vh;
}
这告诉 flex 容器是视口(viewport)的高度。现在容器的高度高于内容的高度,您会注意到 flex-grow
正在发挥作用。
Learn more about the height: auto
default on most elements .
关于html - flex-grow 在列布局中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52266075/