css - 伪元素未在左上角对齐

Question

我正在使用 CSS counter 和 content 显示图 block 编号。我想在图 block 的左上角显示这些数字。以下代码在 Chrome 中正确显示，但在 FF 或 IE 11 中不正确(尚未在其他浏览器上检查)。

我需要对 CSS 进行哪些更改才能始终如一地在左上角显示数字？

Chrome:这就是我想要的:

Firefox:数字左对齐...但不是顶部:

.tiles {
  /* flex properties as container (tiles level 1, 2 & 3) */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: strech;
  align-content: strech;
  /* flex properties as content (tiles level 2 & 3) */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: strech;
}

.tiles.level1 {
  flex-direction: column;
  flex-grow: 0;
  width: 600px;
  height: 300px;
  counter-reset: tileNum;
}

.tiles.level2 {
  flex-direction: row;
}

.tiles.level3 {
  flex-direction: row;
}

.tiles .title {
  align-self: center;
  font-size: 42px;
}

.tile {
  border: 1px solid black;
  background-color: white;
  width: 1px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  /* auto = use width & height values if available */
  font-size: 24px;
}

.centerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.centerContent {
  /*	flex-grow: 1;
	flex-shrink: 1;
	align-self: center;*/
}

.tile:before {
  counter-increment: tileNum;
  content: counter(tileNum);
  align-self: flex-start;
  flex-grow: 0;
  font-size: 16px;
}

.tile:after {
  content: ' ';
  align-self: flex-end;
  flex-grow: 0;
  font-size: 16px;
}

.brand {
  text-decoration: underline;
  font-variant: small-caps;
}

<section class="section static">
  <div class="tiles level1">
    <span class="title">
			<span class="brand">So</span>mething
    </span>
    <div class="tiles level2">
      <div class="tiles level3">
        <span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
      <div class="tiles level3">
        <span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
    </div>
    <div class="tiles level2">
      <div class="tiles level3">
        <span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
      <div class="tiles level3">
        <span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
    </div>
  </div>
</section>

注意:

1. 我正在使用 flex box 来显示图 block ，并且更喜欢仅使用 flexbox 的解决方案
2. 我正在寻找纯 CSS 解决方案。 (我很确定这是可能的，但我错过了一些与 flexbox 属性相关的东西。)
3. 需要嵌套 .tiles，因为:我想在 PC 或移动设备上以横向模式查看页面时连续显示 4 个图 block ，但在查看时只想连续显示 2 个图 block 在纵向模式下的移动设备上。我可以为此找到一些替代方案。

Answer 1

问题的根源是align-content这里:

.centerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center; <-- causing the problem
    flex-direction: row;
    flex-wrap: wrap;
}

当你告诉 flex 容器中的行居中时，这会折叠所有额外的空间，将所有行打包在容器的中心。这就是 align-content: center 所做的。

所以你的计数器伪元素，browsers consider a flex item ，不应移动到容器的顶部。您指定的 align-self: flex-start 应该无法实现您的目标，因为该元素及其兄弟项被限制在居中的 flex 行中。

因此，就遵守规范而言，Firefox 拥有此权利。

Chrome，就像它经常做的那样(参见 here 和 here 的例子)，似乎在考虑逻辑用户行为以改善用户体验(他们称之为 intervention )。

无论如何，一旦你删除了 align-content: center，stretch 默认值再次接管，你的 flex 元素可以沿着容器的整个高度自由移动.

.tiles {
  /* flex properties as container (tiles level 1, 2 & 3) */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: strech;
  align-content: strech;
  /* flex properties as content (tiles level 2 & 3) */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: strech;
}

.tiles.level1 {
  flex-direction: column;
  flex-grow: 0;
  width: 600px;
  height: 300px;
  counter-reset: tileNum;
}

.tiles.level2 {
  flex-direction: row;
}

.tiles.level3 {
  flex-direction: row;
}

.tiles .title {
  align-self: center;
  font-size: 42px;
}

.tile {
  border: 1px solid black;
  background-color: white;
  width: 1px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  /* auto = use width & height values if available */
  font-size: 24px;
}

.centerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* align-content: center; <-- REMOVE */
  flex-direction: row;
  flex-wrap: wrap;
}

.centerContent {
  /*	flex-grow: 1;
	flex-shrink: 1;
	align-self: center;*/
}

.tile:before {
  counter-increment: tileNum;
  content: counter(tileNum);
  align-self: flex-start;
  flex-grow: 0;
  font-size: 16px;
}

.tile:after {
  content: ' ';
  align-self: flex-end;
  flex-grow: 0;
  font-size: 16px;
}

.brand {
  text-decoration: underline;
  font-variant: small-caps;
}

<section class="section static">
  <div class="tiles level1">
    <span class="title">
			<span class="brand">So</span>mething
    </span>
    <div class="tiles level2">
      <div class="tiles level3">
        <span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
      <div class="tiles level3">
        <span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
    </div>
    <div class="tiles level2">
      <div class="tiles level3">
        <span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
      <div class="tiles level3">
        <span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
        <span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
        </span>
      </div>
    </div>
  </div>
</section>

jsFiddle demo

有关更完整的解释，请参阅此帖子:

• How does flex-wrap work with align-self, align-items and align-content?