Question

我想让views-cntnr占用views-cntnr和menubar div未使用的空间。为此，我将flex显示设置为列方向。然后，我将flex-grow的{{1}}属性设置为1.似乎没有做任何事情。 JSFiddle

注意：不确定这是否重要，但我有一些嵌套的flex显示。

HTML

views-cntnr

CSS

<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>

Answer 1

代码中的所有内容都运行正常。

唯一的问题是 您的Flex容器没有指定的高度 。因此，高度会解析为auto，即内容的高度。

flex-grow属性在容器中分发 free 空间。由于容器中没有可用空间，flex-grow无关。

尝试对CSS进行此调整：

.analysis {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

这告诉flex容器是视口的高度。现在容器的高度高于内容的高度，你会注意到flex-grow正在做它的工作。

Revised Fiddle

Learn more about the height: auto default on most elements

flex-grow在列布局中不起作用

HTML

CSS

1 个答案: