如何在纯 css 中防止宽度非常小的 "break"？

Question

下面的代码片段显示了一排方块和一排钥匙（与文字游戏不同，我正试图将其构建为一个学习项目）。在非常小的宽度下，最后一个图块列会中断到一个新行，最后几个键也会中断。

有什么办法可以避免这种情况吗？我希望布局变得更窄（无论屏幕多小），但在宽屏幕上仍然看起来不错。

（奇怪的是，无论我将屏幕做得多窄，只有最后一个瓦片破裂，而前四个瓦片只是挤压。我希望所有瓦片和按键都像前 4 个瓦片一样......只需挤压）

将“响应式”库添加到 pure 并没有帮助，而且当我查看媒体查询（对我来说是新的）时，我只看到了一种让事情早点坏掉的方法，而不是晚点。我已经缩小了在更大的显示器上看起来不错的边距，所以我也没有想法。

.centered-cols {
  justify-content: center;
  letter-spacing: normal;
}

.tile {
  text-align: center;
  max-width: 4em;
  min-height: 4.2em;
  border: solid;
  border-color: lightgrey;
  margin: 0.1em;
}

.key {
  text-align: center;
  min-width: 1.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: #D4D6DA;
}

.akey {
  margin-left: 0.2em;
}

.special {
  min-width: 3em;
}

<link href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css" rel="stylesheet" />
<link href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="00" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="01" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="02" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="03" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="04" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
</div>
<div class="pure-g centered-cols">
  <div id="enter" class="pure-u-1-9 key special">
    <p>&#x02713;</p>
  </div>
  <div id="z" class="pure-u-1-9 key">
    <p>Z</p>
  </div>
  <div id="x" class="pure-u-1-9 key">
    <p>X</p>
  </div>
  <div id="c" class="pure-u-1-9 key">
    <p>C</p>
  </div>
  <div id="v" class="pure-u-1-9 key">
    <p>V</p>
  </div>
  <div id="b" class="pure-u-1-9 key">
    <p>B</p>
  </div>
  <div id="n" class="pure-u-1-9 key">
    <p>N</p>
  </div>
  <div id="m" class="pure-u-1-9 key">
    <p>M</p>
  </div>
  <div id="backspace" class="pure-u-1-9 key special">
    <p>&larr;</p>
  </div>
</div>

Answer 1

.pure-g class 有 flex-flow : row wrap 属性导致将磁贴分成新行。 flex-flow : row nowrap 瓷砖保持在一行。

.centered-cols {
  justify-content: center;
  letter-spacing: normal;
}

.tile {
  text-align: center;
  max-width: 4em;
  min-height: 4.2em;
  border: solid;
  border-color: lightgrey;
  margin: 0.1em;
}

.key {
  text-align: center;
  min-width: 1.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: #D4D6DA;
}

.akey {
  margin-left: 0.2em;
}

.special {
  min-width: 3em;
}


.pure-g:first-of-type {
  flex-flow: row nowrap;
}

<link href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css" rel="stylesheet" />
<link href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="00" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="01" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="02" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="03" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="04" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
</div>
<div class="pure-g centered-cols">
  <div id="enter" class="pure-u-1-9 key special">
    <p>&#x02713;</p>
  </div>
  <div id="z" class="pure-u-1-9 key">
    <p>Z</p>
  </div>
  <div id="x" class="pure-u-1-9 key">
    <p>X</p>
  </div>
  <div id="c" class="pure-u-1-9 key">
    <p>C</p>
  </div>
  <div id="v" class="pure-u-1-9 key">
    <p>V</p>
  </div>
  <div id="b" class="pure-u-1-9 key">
    <p>B</p>
  </div>
  <div id="n" class="pure-u-1-9 key">
    <p>N</p>
  </div>
  <div id="m" class="pure-u-1-9 key">
    <p>M</p>
  </div>
  <div id="backspace" class="pure-u-1-9 key special">
    <p>&larr;</p>
  </div>
</div>

如何在纯 css 中防止宽度非常小的 "break"？

How to prevent a "break" for very small widths in pure css?

html

css

yui-pure-css