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

【问题标题】：Using CSS Columns 'page-break-inside' doesn't work with Flexbox 'align-items:center'使用 CSS 列 'page-break-inside' 不适用于 Flexbox 'align-items:center'
【发布时间】：2016-09-05 18:09:57
【问题描述】：

这只是 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

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

【问题讨论】：

inline-block 或 inline-flex 应该避免看到容器分成 2 列 codepen.io/gc-nomade/pen/pyYyEj
是的@GCyrillus。看起来不错。使用截断更新您的笔：codepen.io/achisholm/pen/JXzXbO?editors=1100

标签： css firefox flexbox mozilla

【解决方案1】：

根据4. Rules for Breaking：

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

除了通常不可分割的任何内容外，UA 可以认为monolithic 任何带有overflow 集合的元素到auto 或scroll 以及带有overflow: hidden 和a 的任何元素非auto logical height（并且没有指定最大逻辑高度）。

由于行框不包含可能的断点，inline-block 和inline-table 框（以及其他建立新formatting context 的内联级display types）也可能是考虑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>

【讨论】：