相关疑难解决方法(0)

我有一个闪亮的服务器版本0.4.0,我希望有4个小textInput框看起来像这样:

x-min x-max y-min y-max
[...] [...] [...] [...]

他们现在看起来像这样:

x-min 
[...................]
x-max
[...................]
y-min 
[...................]
y-max 
[...................]

使用此代码:

textInput(inputId="xlimitsmin", label="x-min", value = 0.0),
textInput(inputId="xlimitsmax", label="x-max", value = 0.5),
textInput(inputId="ylimitsmin", label="y-min", value = 0.5),
textInput(inputId="ylimitsmax", label="y-max", value = 1.0),

任何想法如何实现这一目标？

编辑:我在代码的其他地方成功地改变了这样的事情:

<style type="text/css">select#yaxis4 { height: 280px; width: 500px; }</style>
[... which links to this later on in the page...]
          <label class="control-label" for="yaxis4">Y-Axis</label>
          <select id="yaxis4" multiple="multiple">

这就是那些不起作用的东西:

<style type="text/css">select#xlimitsmax { display: inline-block; max-width: 50px; }</style>
[... which links to...]
          <label>x-max</label>
          <input …

我恐怕不能理解弹性增长.如果你跳到下面的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>

下面是两行.

• 第一行是两个项目,flex 1一个是flex 2.

• 第二行是两个项目flex 1.

根据规范1A + 1B = 2A

但是,当计算中包含填充时,总和不正确,如下面的示例所示.

题

如何获得弹性框以在其计算中包含填充,以便示例中的框正确排列？

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:0 10px 10px 0;
}
.Item > div{
  background:#7ae;
}
.Flx2{
  flex:2;
}

<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

假设我们有一个宽度为400px的弹性容器.

在这个容器里面有三个flex项:

:nth-child(1) { flex: 0 2 300px; }   /* flex-grow, flex-shrink, flex-basis */
:nth-child(2) { flex: 0 1 200px; }
:nth-child(3) { flex: 0 2 100px; }

因此,flex项的总宽度为600px,容器中的可用空间为-200px.

在这个问题,本文和flexbox规范的帮助下,我学会了在flex项目中分配负空闲空间的基本公式:

步骤1

将每个收缩值乘以其基础并将它们全部加在一起:

:nth-child(1)  2 * 300 = 600
:nth-child(2)  1 * 200 = 200
:nth-child(3)  2 * 100 = 200

总计= 1000

第2步

将上面的每个项目除以总数来确定收缩因子:

:nth-child(1)  600 / 1000 = .6
:nth-child(2)  200 / 1000 = .2
:nth-child(3)  200 / 1000 = .2 …

设置flex: 1;和设置之间有什么区别flex-grow: 1;？当我在我的代码中设置前者时,我显示的两列具有相同的宽度,而当我设置后者时它们不会这样做.

这很奇怪,因为我认为设置flex: 1;只影响flex-grow属性.

在下面的代码和jsfiddle中,flexbox比例随内容而变化.我觉得我不明白这里的flexbox的真正目的.如果我们flex-grow按照我们想要的比例提供物业,为什么箱子会随着内容的增长而增长？

请注意,当其中dataDiv包含新的跨度内容时,比例会随内容而中断.删除span内部时,您可以观察它的预期比例dataDiv.为什么会这样？

https://jsfiddle.net/4shaz5oy/

.container {
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
}
.mapBox {
  flex: 2;
  background-color: red;
}
.controlBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: green;
}
.controlPanel {
  flex: 1;
  max-height: 33%;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}
.dataPanel {
  flex: 2;
  max-height: 66%;
  background-color: blue;
  padding: 5px;
}

<div class="container">
  <div class="mapBox"></div>
  <div class="controlBox">
    <div class="controlPanel">
      <div class="buttonDiv"></div>
      <div class="buttonDiv"></div>
      <div class="buttonDiv"></div>
    </div>
    <div class="dataPanel"> …

我最近开始使用flexbox,经常出现需要在元素之间的主轴上分配空间的情况.

我常常width和之间犹豫不决flex-grow.例如,如果我想要一个项目来衡量2个度量,而另一个度量,最多加上100%,我有两个选择.我可以设置width: 66.6%和width: 33.3%,或者flex-grow: 2和flex-grow: 1.

有时如果我想要一个元素来扩展其余的空间,我可以做width: 100%或者flex-grow: 1.

我该如何选择？使用宽度与弹性增长有什么区别/考虑因素？

我正在使用CSS flexbox来构建可扩展的响应式网格.将Google图表应用于其中一个Flexbox项目时,该项目会稍微改变大小.这足以使网格不对齐.我把以下图片放在一起以帮助说明问题.

将Google图表应用于第6项之前的Flexbox网格:

将Google图表应用于第6项后的Flexbox网格:

Flexbox网格加载速度比Google图表快,因此网格最初正确加载.但是,当图表加载时,项目6会略微扩展,从而导致图像2上方.

中间列flex容器和item 6 div在css中设置如下:

#middlecolumn {
    width: 75%;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin: 0.25%;
}

#item6_div {
    flex: 3;
    margin-top: 0.8vh;
}

请注意,项目5和7在css中的设置方式相同,flex值为1.即项目6是项目5和7的高度的3倍.这样,当项目6调整大小时,保持3:1的比率.

我是否在css中缺少一些东西来阻止Google图表调整其flexbox容器项目的大小？

我有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。两个元素之间似乎存在意外的边距差异div- 第三行的 div 之间的边距与前两行不同：

如何修改代码以使第三行的边距与前两行相同？

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.container:after {
  flex: 1;
  content: '';
}

.container form {
  width: 100%;
  display: flex;
}

.container .comment {
  flex: 1;
}

.square {
  padding: 10px;
  width: calc(100% / 9);
  margin: 0.7vw 0 0.7% 1vw;
  background: red;
}

<div class="container">
  <form method="post" style="margin: 0.7vw 0 0.7% 1vw;">
    <input class="comment" type="text">
    <input type="submit">
  </form>

  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div …