小编Fra*_*mer的帖子

我真的很喜欢新的 CSS flexbox 设计可能性。特别是flex-wrap: wrap可以成为节省一些空间的强大工具（例如简单的移动导航设计模式）。

我的情况：我有这个导航，在桌面上所有项目都排成一行。随着flex:auto该项目填补了所有的空间。现在，当我调整浏览器的大小时，在某个时刻，当没有更多空间时，flex-wrap 会自动为我创建第二行。

看我的小DEMO或看看这张图片：

这就是让我发痒的原因：只有第一项在第二行（当第一次包装发生时）。这并不是真正的平衡，并且对这个项目给予了很多关注。我想要的是平均分配它们。是否有我在这里缺少的仅包含CSS 的不包含黑客的方式？

编辑：我为动态网络应用程序做这个布局。此导航应适合不同的视图和情况。所以我不想关心会有多少项目。理想情况下，标记应该是一个简单的ul li列表（没有额外的行，没有额外的类）。所以我真的在寻找某种 CSS 参数魔法。

EDIT2：为了更好地理解：text-wrap: balance是一个建议，只对排版的纯文本块进行基本相同的处理。

EDIT3：例如，参见 Bootstrap CSS 框架网格模型。这里有各种列宽。您需要为每个设备宽度定义一列占用多少空间（三分之一，四分之一），例如：此列占用桌面宽度的四分之一，但仅占用手机宽度的一半。当浏览器可以证明这一点时，它会不会更酷？

EDIT4：想想CSS-columns，这里的内容跨越列，但内容方向只能在N-form（逐列）中，想象在Z-form（逐行）中相同。

我想创建一个本地倒置主题（现代浏览器）。使用 CSS Vars（CSS 自定义属性）设置颜色阴影。有些元素对比度较高，有些元素对比度较低。现在倒置的容器具有黑色背景。里面的一切，都应该颠倒过来。深灰色应该是浅灰色。浅灰色应该是深灰色。

我的目标是在不重新分配 CSS 选择器中的变量的情况下实现这一点。对于这个例子，这很容易，但实际的代码库很大，而且有很多选择器。因此，我只想更改 CSS Vars。此外，我希望保持原始 CSS Vars 可编辑。

最终目标模型

显然，简单地重新分配变量（亮 = 暗，暗 = 亮）是行不通的。我试图将这些值转置为一个新的占位符 var，但这也不起作用。也许我做错了？有干净的方法吗？我不这么认为。

我知道使用 SASS 的解决方法，或使用混合模式的黑客。

游乐场：https :
//codepen.io/esher/pen/WzRJBy

示例代码：

<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>

<div class="inverted">
  <p class="high-contrast">high contrast</p>
  <p class="low-contrast">low contrast</p>
</div>

<style>
  :root {
    --high-contrast: #222;
    --low-contrast:  #aaa;
  }

  .high-contrast { color: var(--high-contrast) }
  .low-contrast  { color: var(--low-contrast)  }

  .inverted {
    background-color: black;

    /* Switching vars does not work 
    --high-contrast: var(--low-contrast);
    --low-contrast:  var(--high-contrast);
    */

    /* Transposing …