html - flex-grow在列佈局中不起作用



css css3 (1)

您代碼中的所有內容都可以正常工作。

唯一的問題是 您的flex容器沒有指定的高度 。 因此,height解析為 auto ,表示內容的高度。

flex-grow 屬性在容器中分配 可用 空間。 由於容器中沒有可用空間,因此 flex-grow 無關。

嘗試對CSS進行此調整:

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

這告訴flex容器是視口的高度。 現在,容器的高度比內容容器的高度高,您會注意到 flex-grow 在做它的工作。

修正的小提琴

了解有關 height: auto 更多信息 height: auto 大多數元素 height: auto 默認設置 。

我試圖讓 views-cntnr 佔用 views-cntnrmenubar div未使用的任何空間。 為此,我將flex顯示設置為列方向。 然後,將 views-cntnrflex-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-grow