不知道为什么flex

不知道为什么flex

关注
发信
关注(28)粉丝(399)

不知道为什么flex-grow：1不工作在我的列布局

本文介绍了不知道为什么flex-grow：1不工作在我的列布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时删除！！

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



注意：不确定是否但是我有一些嵌套的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.

Revised Fiddle

这篇关于不知道为什么flex-grow：1不工作在我的列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

09-06 14:42
Powered by LMLPHP ©2024 不知道为什么flex 0.035480