Question

我在Chrome移动设备上let string = "Hello-world" if let range = string.range(of: "-") { let firstPart = string[(string.startIndex)..<range.lowerBound] print(firstPart) }的{{1}}值存在问题（它在桌面和Firefox移动设备上运行正常）。

我设法制作了一个最小的例子：Example

我有一个行方向的Flex容器，我希望这些元素在使用space-evenly时按预期均匀分布。它适用于桌面设备，但在Chrome移动设备（Android版本59）上，元素在左侧对齐。以下是两者的比较：Comparison

justify-content和space-evenly值按预期工作，但我真的想使用center或等效（space-around行为对我来说也很重要）。

这是我的HTML：

space-evenly

这是我的CSS：

flex-wrap: wrap

提前致谢！

Answer 1

对于不支持它的浏览器，多线/包裹space-evenly尚无解决方案。

使用flex-wrap: wrap时，您需要在Flex容器上设置固定填充，在项目上设置边距或使用脚本。

如果可以包装每一行，您可以将伪元素与space-between结合使用，以获得与space-evenly给出完全相同的结果。

在下面的示例中，space-between在计算两者之间的空间时会考虑零宽度伪元素，从而产生相同的结果。

＆＃13;

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* flex-wrap: wrap; */
  /* align-items: flex-start;        if "img", this will prevent it from stretching  */
  background: lightgrey;
}

.element {
  margin: 8px;
  width: 42px;
  height: 42px;
  background: black;
}

.container::before,
.container::after {
  content: '';
}

＆＃13;

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

＆＃13;

Answer 2

更新这似乎只适用于单行

你可以通过边距和最终的伪元素均匀地伪造空间。

＆＃13;

.container {
  display:flex;
}
.element,.container:before  {
  border:solid;
  margin:0 auto 0 0;
  padding:1em;
}
.container:before {
  content:'';
  border:none;
  padding:0;
}

＆＃13;

<div class="container">
  <div class="element">11</div>
  <div class="element">2 </div>
  <div class="element">3333</div>
  <div class="element">444</div>
</div>

＆＃13;

按照@IlyaStreltsyn

的建议

或nth-child

甚至没有伪元素：.element:first-child { margin: 0 auto; }

空间均匀（证明内容）无法在Chrome移动设备上运行

2 个答案: