css - 使用 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;

参见 Codepen(启用第 20 行或第 24-25 行)破坏了布局...

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

编辑

因此，我可以通过垂直居中“hack”实现所需的布局，但如果可能的话，我更愿意使用 Flexbox。

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

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

Answer 1

根据 4. Rules for Breaking :

Some content is not fragmentable, for example many types of replaced elements (such as images or video), scrollable elements, or a single line of text content. Such content is considered monolithic: it contains no possible break points. Any forced breaks within such boxes therefore cannot split the box, and must therefore also be ignored by the box’s own fragmentation context.

In addition to any content which is not generally fragmentable, UAs may consider as monolithic any elements with overflow set to auto or scroll and any elements with overflow: hidden and a non-auto logical height (and no specified maximum logical height).

Since line boxes contain no possible break points, inline-block and inline-table boxes (and other inline-level display types that establish a new formatting context) may also be considered monolithic.

所以你可以使用

.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 commented ,

.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>