小编LGS*_*Son的帖子

是否可以计算flexbox flex-basis属性？

像这样的东西

flex-basis:20%-30px

在chrome中调试css可以简化生活.我正在开发一个本机应用程序.每次我做任何css更改我都要刷新我的模拟器来检查它.还有其他解决方法吗？

如果将前一个兄弟设置为float宽度为100%并且将以下兄弟设置为display: flex,则后者将溢出父容器而不是换行到新行.

对于任何其他display值,但flex(或grid)它包装,因为它应该,所以它设置为什么时不会flex

.float-left {
  float: left;
  width: 100%;
}

.display-flex {
  display: flex;
  background: yellow;
}


/* Demo css */

.container {
  max-width: 80%;
  margin: auto;
  background: white;
}

<div class="container">
  <div class="float-left">I'm floating left, with a width of 100%.</div>
  <div class="display-flex">'Floating left' takes up 100% of the space, but still i don't go onto a new line?</div>
</div>

我有一个CSS问题,我不知道如何解决.情况如下.我有一个<div>flex-item,它垂直拉伸,以便填充其flex-container的可用高度.根据浏览器窗口的大小,这<div>是一个矩形,有时高于宽,有时比高.

现在我想把另一个<div>放在这个矩形的内部,它应该是一个正方形.相对于周围的矩形,它应该尽可能大,但必须始终完全可见.

创建正方形的典型方法padding-bottom是将百分比值设置为(与宽度相同的百分比值).这实际上创建了一个正方形,但由于在这种方法中高度始终遵循宽度,如果宽度超过高,它会拉伸出矩形.

我怎样才能解决这个问题,以便广场总是包含在由flexbox计算的矩形大小的边界内,理想情况下不使用JavaScript？

更新:同时,我使用JavaScript解决了它,但我仍然对纯CSS解决方案感兴趣,如果有的话.

这是简化的布局:

<div class="root">
  <div class="container">
    <div class="cell">
      <input type="text" class="contact"></input>
    </div>
  </div>
</div>

这是简化的CSS:

.root {
  background-color: red;
  overflow: auto;
  width: 300px;

}

.container {
  background-color: green;
  display: flex;
  height: 50px;
}

.cell {
  background-color: black;
  height: 30px;
}

.contact {
  width: 400px;
}

这是jsFiddle.

我有点意外的是,它的container宽度与它的孩子所需的宽度不同,而是受到它的限制root div.您可以在此jsFiddle中看到红色区域(根div)未填充绿色container div.

有人可以解释为什么flex容器宽度不会随着它的孩子而增长以及如何解决这个问题？

我有一个带有内部div的容器，其中包含项目。

<div class="container">
 <div class="inner">
  <span class="item">1</span>
 </div>
</div>

容器或内部div宽度不固定。容器可以调整大小。内部div应该始终适合它的内容。

应该发生的是，内部div应该始终在容器内部居中。

当内部div内的项目无法再放入容器内时，应分成第二行。

我正在使用display: flex并且display: inline-flex将内部div居中。但是，当项目换行到第二行时，内部div将占用容器的宽度，并且不再适合内容。因此，它不会位于容器的中心。

这是当前情况的一个小提琴。

在保持内部div 宽度动态的同时，如何始终使内部div始终居中于容器。

预期成绩：

我有一个 flex 项目的容器，我试图根据屏幕大小在不同的布局中组织不同数量的 flex 项目。例如，在桌面上，我想要有 4 个容器，每个容器有 2 个项目，排列在 2x4 网格中，每个单元格是 1x2。我似乎无法理解的是完全使用 flexbox 在平板电脑上获得布局。任何指向正确方向的指针都会很棒。

div {
  box-sizing: border-box;
  width: 100%;
}

.container {
  display: flex;
  border: 1px solid red;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 10px;
}

.cell {
  display: flex;
  flex: 50%;
  padding: 10px;
  border: 1px solid blue;
  height: 100px;
}

.data {
  width: 100%;
  justify-content: middle;
  flex: 1;
  border: 1px solid green;
}

@media only screen and (max-width: 1024px) {
  .container {
    display: inline-block;
    position: relative;
  }

  
  #cell1 { …

我有一个flexbox控制的页脚.它可以包含1,2或3个从属div.

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

<div class='footer'>
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

有2或3个div,上面的CSS工作正常:

• 有三个,左和右是左右冲洗,中间是中间.
• 2,他们左右冲洗

但是对于一个div,它是左对齐的.我希望它会集中在一起.

如何调整css,以便在单个div的情况下它将居中,同时保留2或3个div的行为？

我试图找出两个物体之间的差异

previousChart: {BWP: 1, ZAR: 1.3, USD: 0.09324, number: 1},
currentChart: {BWP: 1, ZAR: 1.35, USD: 0.01, number: 2}

期望的答案是：

newObject ={BWP: 0, ZAR: 0.05, USD: 0.08324, number: -1}

请不要问我做了什么，因为这是最后一个阶段，因为这是我代码的最后一部分，如果您有兴趣知道我在这里做了什么，那就是：

rates = [
{BWP: 1, ZAR: 1.3, USD: 0.09324, number: 1},
{BWP: 1, ZAR: 1.35, USD: 0.01, number: 2},
{BWP: 1, ZAR: 1.3456, USD: 0.09234, number: 3},
{BWP: 1, ZAR: 1.27894, USD: 0.06788, number: 4}
]

newRate = [];

for(let i in rates){

    if( i - 1 === -1 ){ …

不能flex-wrap: nowrap自然地将其宽度作为孩子的宽度？

由于某种原因，它只是其父级的宽度。是否有可能使其宽度达到子级宽度？

在此代码库中，您可以看到背景并没有扩展所有子级的整个宽度。

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  flex-basis: 75%;
  flex-shrink: 0;
}

<div class="flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

编辑：我使用“应该”的假设是，white-space: nowrap应用于内联子级的典型div 会增长以容纳其子级；但是，这也不是真的（https://codepen.io/robgordon/pen/gEvjpL）。