使用 CSS 列'page-break-inside'不适用于 Flexbox 'align-items：center'

Question

这只是Mozilla Firefox中的一个问题(使用最新版本测试(。

我想要一个在四列中垂直居中文本的菜单项布局。

我会走'display: table' 'vertical-align:middle'路线，但这会阻止我在需要时应用修剪，如果可能的话，我宁愿不添加附加包装器元素。

我使用以下 CSS 来实现菜单项内的垂直居中，这会强制在菜单项之间设置列分隔符：

display: flex;
align-items: center;
// or 
flex-direction: column;
justify-content: center;

参见代码笔(启用第 20 行或谎言 24-25(打破布局...

http://codepen.io/achisholm/pen/JXzGwE

编辑

因此，我

可以通过垂直居中"hack"来实现所需的布局，但如果可能的话，我更喜欢使用 Flexbox。

http://codepen.io/achisholm/pen/mPoPPz?editors=1100

我准备把它归结为一个错误，因为所有其他现代浏览器都按照您的期望显示。 虽然我很想知道它为什么会发生，以及它是否出于特定原因而发生。

Answer 1

根据 4。打破规则：

某些内容不可分段，例如许多类型的替换 元素(如图像或视频(、可滚动元素或 单行文本内容。此类内容被视为整体式内容： 它不包含可能的断点。此类内的任何强制中断 因此，盒子不能拆分盒子，因此也必须 被框自己的碎片上下文忽略。

除了任何通常不可分段的内容外，UA 可以考虑任何具有overflow集合的元素作为整体 auto或scroll以及任何带有 overflow: hidden 和 非auto逻辑高度(且未指定最大逻辑高度 高度(。

由于行框不包含可能的断点，因此inline-block 和inline-table框(以及其他内联级显示器( 建立新格式上下文的类型(也可能是 被认为是整体的。

所以你可以使用

.menu-item {
  overflow: hidden;
}

html, body {
  height: 100%;
}
* {
  box-sizing: border-box;
}
nav {
  height: 100%;
  -webkit-columns: 4;
     -moz-columns: 4;
          columns: 4;
}
.menu-item {
  padding: 0 20px;
  height: 8.333%;
  border: 1px solid gainsboro;
  -webkit-column-break-inside: avoid;
     page-break-inside: avoid;
          break-inside: avoid;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}

<nav>
  <a class="menu-item"><p>Menu item 1</p></a>
  <a class="menu-item"><p>Menu item 2</p></a>
  <a class="menu-item"><p>Menu item 3</p></a>
  <a class="menu-item"><p>Menu item 4</p></a>
  <a class="menu-item"><p>Menu item 5</p></a>
  <a class="menu-item"><p>Menu item 6</p></a>
  <a class="menu-item"><p>Menu item 7</p></a>
  <a class="menu-item"><p>Menu item 8</p></a>
  <a class="menu-item"><p>Menu item 9</p></a>
  <a class="menu-item"><p>Menu item 10</p></a>
  <a class="menu-item"><p>Menu item 11</p></a>
  <a class="menu-item"><p>Menu item 12</p></a>
  <a class="menu-item"><p>Menu item 13</p></a>
  <a class="menu-item"><p>Menu item 14</p></a>
  <a class="menu-item"><p>Menu item 15</p></a>
  <a class="menu-item"><p>Menu item 16</p></a>
  <a class="menu-item"><p>Menu item 17</p></a>
  <a class="menu-item"><p>Menu item 18</p></a>
  <a class="menu-item"><p>Menu item 19</p></a>
  <a class="menu-item"><p>Menu item 20</p></a>
  <a class="menu-item"><p>Menu item 21</p></a>
  <a class="menu-item"><p>Menu item 22</p></a>
  <a class="menu-item"><p>Menu item 23</p></a>
  <a class="menu-item"><p>Menu item 24</p></a>
  <a class="menu-item"><p>Menu item 25</p></a>
  <a class="menu-item"><p>Menu item 26</p></a>
  <a class="menu-item"><p>Menu item 27</p></a>
  <a class="menu-item"><p>Menu item 28</p></a>
  <a class="menu-item"><p>Menu item 29</p></a>
  <a class="menu-item"><p>Menu item 30</p></a>
  <a class="menu-item"><p>Menu item 31</p></a>
  <a class="menu-item"><p>Menu item 32</p></a>
  <a class="menu-item"><p>Menu item 33</p></a>
  <a class="menu-item"><p>Menu item 34</p></a>
  <a class="menu-item"><p>Menu item 35</p></a>
  <a class="menu-item"><p>Menu item 36</p></a>
  <a class="menu-item"><p>Menu item 37</p></a>
  <a class="menu-item"><p>Menu item 38</p></a>
  <a class="menu-item"><p>Menu item 39</p></a>
  <a class="menu-item"><p>Menu item 40</p></a>
  <a class="menu-item"><p>Menu item 41</p></a>
  <a class="menu-item"><p>Menu item 42</p></a>
  <a class="menu-item"><p>Menu item 43</p></a>
  <a class="menu-item"><p>Menu item 44</p></a>
  <a class="menu-item"><p>Menu item 45</p></a>
  <a class="menu-item"><p>Menu item 46</p></a>
  <a class="menu-item"><p>Menu item 47</p></a>
</nav>

或者，正如GCyrillus评论的那样，

.menu-item {
  display: inline-flex;
  width: 100%;
}

html, body {
  height: 100%;
}
* {
  box-sizing: border-box;
}
nav {
  height: 100%;
  -webkit-columns: 4;
     -moz-columns: 4;
          columns: 4;
}
.menu-item {
  padding: 0 20px;
  height: 8.333%;
  border: 1px solid gainsboro;
  -webkit-column-break-inside: avoid;
     page-break-inside: avoid;
          break-inside: avoid;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

<nav>
  <a class="menu-item"><p>Menu item 1</p></a>
  <a class="menu-item"><p>Menu item 2</p></a>
  <a class="menu-item"><p>Menu item 3</p></a>
  <a class="menu-item"><p>Menu item 4</p></a>
  <a class="menu-item"><p>Menu item 5</p></a>
  <a class="menu-item"><p>Menu item 6</p></a>
  <a class="menu-item"><p>Menu item 7</p></a>
  <a class="menu-item"><p>Menu item 8</p></a>
  <a class="menu-item"><p>Menu item 9</p></a>
  <a class="menu-item"><p>Menu item 10</p></a>
  <a class="menu-item"><p>Menu item 11</p></a>
  <a class="menu-item"><p>Menu item 12</p></a>
  <a class="menu-item"><p>Menu item 13</p></a>
  <a class="menu-item"><p>Menu item 14</p></a>
  <a class="menu-item"><p>Menu item 15</p></a>
  <a class="menu-item"><p>Menu item 16</p></a>
  <a class="menu-item"><p>Menu item 17</p></a>
  <a class="menu-item"><p>Menu item 18</p></a>
  <a class="menu-item"><p>Menu item 19</p></a>
  <a class="menu-item"><p>Menu item 20</p></a>
  <a class="menu-item"><p>Menu item 21</p></a>
  <a class="menu-item"><p>Menu item 22</p></a>
  <a class="menu-item"><p>Menu item 23</p></a>
  <a class="menu-item"><p>Menu item 24</p></a>
  <a class="menu-item"><p>Menu item 25</p></a>
  <a class="menu-item"><p>Menu item 26</p></a>
  <a class="menu-item"><p>Menu item 27</p></a>
  <a class="menu-item"><p>Menu item 28</p></a>
  <a class="menu-item"><p>Menu item 29</p></a>
  <a class="menu-item"><p>Menu item 30</p></a>
  <a class="menu-item"><p>Menu item 31</p></a>
  <a class="menu-item"><p>Menu item 32</p></a>
  <a class="menu-item"><p>Menu item 33</p></a>
  <a class="menu-item"><p>Menu item 34</p></a>
  <a class="menu-item"><p>Menu item 35</p></a>
  <a class="menu-item"><p>Menu item 36</p></a>
  <a class="menu-item"><p>Menu item 37</p></a>
  <a class="menu-item"><p>Menu item 38</p></a>
  <a class="menu-item"><p>Menu item 39</p></a>
  <a class="menu-item"><p>Menu item 40</p></a>
  <a class="menu-item"><p>Menu item 41</p></a>
  <a class="menu-item"><p>Menu item 42</p></a>
  <a class="menu-item"><p>Menu item 43</p></a>
  <a class="menu-item"><p>Menu item 44</p></a>
  <a class="menu-item"><p>Menu item 45</p></a>
  <a class="menu-item"><p>Menu item 46</p></a>
  <a class="menu-item"><p>Menu item 47</p></a>
</nav>