标签: flex-grow

我终于升级反应原产于0.42,其中包括引入的flexGrow,flexShrink和 flexBasis以及如何改变(或固定)flex被呈现.

我一直收到如下错误:

视图使用显式设置的宽度/高度进行渲染,但使用0 flexBasis.(这可以通过改变flex来修复:到flexGrow :)查看:

有人可以解释flex: 1vs 之间的区别flexGrow: 1.如果我将一个或另一个应用于View,它似乎做了不同的事情,但不应该这样做吗？

我恐怕不能理解弹性增长.如果你跳到下面的JSFiddle - 我理解它的方式,.big应该是另一个的三倍.flex-item.如你所见,不是这样.为什么？

http://jsfiddle.net/nrur6mmo/

.flex-container {
    display:flex;
    padding:0 20%;
}
.flex-item {
    flex-grow:1;
    list-style-type:none;
    border:1px solid black;
}
.big {
    flex-grow:3;
}

<ul class="flex-container">
    <li class="flex-item big">Why isn't this exactly three times the size of the other one?</li>
    <li class="flex-item">Not really working like expected I don't think...</li>
</ul>

我有3个div,如果我给flex: 0.5前两个div,如果我给的话,最后一个div应该移动到下一行flex-wrap: wrap.如果我错了,请纠正.

以下是我的html/css:

.parent {
  display: flex;
  height: 100px;
  background-color: red;
  flex-wrap: wrap;
}
.child-1 {
  background-color: green;
  flex: 0.5;
}
.child-2 {
  background-color: yellow;
  flex: 0.5;
}
.child-3 {
  background-color: pink;
}

<div class="parent">
  <div class="child-1">LOREN IPSUM LOREN IPSUM</div>
  <div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div>
  <div class="child-3">LOREN IPSUMLOREN IPSUM</div>
</div>

请检查JSFiddle.

提前致谢.

我正在尝试使用flex来创建相同宽度的flex项,但是它们会根据flex项中的子项数不断改变宽度

小提琴

正如您所看到的,正确的绿色容器要小得多,即使两者都具有柔性增长:1

我怎样才能解决这个问题？谢谢!

span {
    display: inline-block;
    width: 10px;
    height: 30px;
    border: 1px solid red;
}
.container {
    display: flex;
    display: -webkit-flex;
    border: 1px solid blue;
    width: 200px; 
    padding: 2px;

}
.item {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    border: 1px solid green;
}

我试图views-cntnr占用任何未使用的空间views-cntnr和menubardiv.为此,我将flex显示设置为列方向.然后我将flex-grow属性设置views-cntnr为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> …

我正在尝试构建一个导航面板，该面板的顶部有一个固定高度的主导航栏，固定在屏幕底部的固定高度的辅助导航栏，以及一个位于其间的容器，该容器填充剩余空间并可滚动，具体取决于里面的项目列表的长度。

我正在学习使用flexbox，并认为我可以使用 flex-grow 和 Overflow:hidden 来完成此任务，但是我遇到了一些麻烦。

这是一个小提琴

html,
body {
  height: 100%;
}

.container-main {
  display: flex;
  height: 100%;
  flex-flow: column;
}

.nav-bar {
  display: flex;
  height: 36px;
  background-color: grey;
}

.container-dd {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.dd-fill {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  background-color: green;
  overflow: hidden;
}

.dd-bot {
  display: flex;
  height: 100px;
}

<div class="container-main">
  <div class="nav-bar">top nav bar</div>
  <div class="container-dd">
    <div class="dd-fill">
      <p>list item</p>
      <p>list item</p>
      <p>list item</p> …

我有一个Row看起来像这样：

SizedBox(
    height: 64,
    child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
        Expanded(
            child: Container(
            color: Colors.blue,
            child: Text("looooooooong", softWrap: false))),
        Expanded(
            child: Container(
            color: Colors.green, child: Text("short", softWrap: false)))
    ]));

如您所见，蓝色容器中的文字被剪掉了。

用CSS构建相同的东西看起来像这样：

SizedBox(
    height: 64,
    child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
        Expanded(
            child: Container(
            color: Colors.blue,
            child: Text("looooooooong", softWrap: false))),
        Expanded(
            child: Container(
            color: Colors.green, child: Text("short", softWrap: false)))
    ]));

#container {
  width: 100px;
  height: 64px;
  display: flex;
  align-items: stretch;
}

#first {
  flex-grow: 1;
  background-color: blue;
}

#second …

Caniuse表示部分支持使用-ms-前缀http://caniuse.com/#search=flex-grow,据我所知

然而,当测试-ms-flex-grow对IE10没有影响时,我在这里缺少什么？

所以我有一个包含一些盒子的弹性盒子。所有的盒子都占据了三分之一的宽度。由于我使用了 flex-grow，我的最后一个元素不会坚持其列的大小。我明白为什么会发生这种情况，但我不想使用最大宽度，因为指定的宽度通常不太好。任何建议将appriciated ！

这是目前正在发生的事情：

我想要发生的事情：

CODEPEN 这里 - https://codepen.io/matt-priestley/pen/ZmXqzr

<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
</ul>

我刚刚熟悉 Flex 框，当我将 flex-grow:1 应用于一组列时，它似乎使列高均匀增长，但宽度却没有增长，这是我的目标。

如果我理解这一点，默认的弯曲方向是“行”......所以理论上宽度不应该全部相等。

.flex{display:flex}
.flex div{flex-grow:1}

/*Just for visual separation*/
.flex div:nth-child(odd){background-color:#ccc}

这是我的示例的 Codepen http://codepen.io/dougmays/pen/dPWQdp

谢谢

目前,我正在努力制作一份清单.在左侧图像适合我的"显示flex布局"并在所有浏览器上调整大小.我的"flex-grow布局"列表1为图像,3为描述.没有图像,一切都很好,但是我的图像(100%宽度)它不适合行的1/3 ...

有人知道解决方案吗？

#main {
    height: 100px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}
#main div:nth-of-type(1) {-webkit-flex-grow: 1;}
#main div:nth-of-type(2) {-webkit-flex-grow: 3;}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main img { width: 100% }

<div id="main">
  <div style="background-color:coral;"><img src="http://www.der-eyecatcher.de/wp-content/uploads/2016/02/Lampe-silber-Schirm_1.jpg"></div>
  <div style="background-color:lightblue;">Description</div>
</div>

<hr>flex-grow without Image<hr>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;">Description</div>
</div>

谢谢

西蒙

下面的第三个 flex 项有一个flex-grow非零值，即0.1。这可能是合理的，我还读到了一个建议，它应该占据任何额外空间的 100%，因为其他 flex 项目是0，并且不能增长。这个是0.1，甚至0.1 / 0.1是 100%（作为一个比率）。然而，实际上在 Chrome 和 Firefox 上它只占用了 10% 的额外空间。为什么以及应该如何表现？

#container {
  display: flex;
  border: 1px dashed blue
}

#container div {
  border: 1px dashed orange
}

#container div:last-child {
  flex-grow: 0.1;
  background: #ccc
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>