flex-grow在列布局中不起作用 [英] flex-grow not working in column layout

问题描述

我试图让 views-cntnr 占用 views-cntnr 和 menubar divs。为了实现这一点，我有一个灵活的显示设置为列的方向。然后我把 views-cntnr 的 flex-grow 属性设置为1。似乎没有做任何事情。 JSFiddle

注意：不知道这个

$ b

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-grouprole =group> 
 < 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 => Console< / 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; 
 
 
 $ b / *菜单栏* / 
 
 
 / * 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; 
 
行1 * / 
 
 / * ROW 2 * / 
 .r2 .view {
 border：black 1px solid; 
 border-top：none; 
 
 
 $ b $ *行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; 
 
 $ b $ * frame ctrl * / 
  

解决

唯一的问题是您的flex容器没有指定的高度 / EM> 即可。因此，高度解析为 auto ，这意味着内容的高度。





flex-grow 属性在容器中分发 free 空间。在你的容器中没有可用空间的情况下， flex-grow 无关紧要。 试试这个调整到你的CSS ：

  .analysis {
 display：flex; 
 flex-direction：column; 
身高：100vh; 
 
 
 
 $ b 
我们告诉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.

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;
}
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.

Revised Fiddle

                        
这篇关于flex-grow在列布局中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！