html - flex-grow no funciona en el diseño de columna
css css3 (1)
Todo en tu código está funcionando bien.
El único problema es que
su contenedor flexible no tiene una altura especificada
.
Por lo tanto, la altura se resuelve en
auto
, es decir, la altura del contenido.
La propiedad
flex-grow
distribuye espacio
libre
en el contenedor.
Sin espacio libre en su contenedor,
flex-grow
no tiene nada que hacer.
Pruebe este ajuste en su CSS:
.analysis {
display: flex;
flex-direction: column;
height: 100vh;
}
Esto le dice al contenedor flexible que sea la altura de la ventana gráfica.
Ahora la altura del contenedor es más alta que la altura del contenido, y notará que
flex-grow
hace su trabajo.
Obtenga más información sobre la
height: auto
valor predeterminado
height: auto
en la mayoría de los elementos
.
Estoy tratando de hacer que
views-cntnr
ocupe cualquier espacio no utilizado por
views-cntnr
y
views-cntnr
divs.
Para lograr esto, tengo una pantalla flexible configurada en la dirección de la columna.
Luego configuro la propiedad
flex-grow
para
views-cntnr
en 1. No parece estar haciendo nada.
JSFiddle
NOTA: No estoy seguro de si esto es importante, pero tengo algunas pantallas flexibles anidadas.
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 */