Question

我使用CSS counter和content显示切片编号。我想在瓷砖的左上角显示这些数字。以下代码在Chrome中正确显示，但在FF或IE 11中未显示（未在其他浏览器上查看）。

我需要在CSS中进行哪些更改才能始终显示左上角的数字？

Chrome：这就是我想要的：

Firefox：数字左对齐但不是顶部：

＆＃13;

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

＆＃13;

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

＆＃13;

注意：

我使用弹性框来显示图块，并且更喜欢仅使用flexbox的解决方案
我正在寻找仅限CSS的解决方案。（我非常确定它是可能的，但我错过了与flexbox属性相关的内容。）
需要.tiles的嵌套，因为：我想在PC上查看页面或横向模式下移动时连续显示4个图块，但如果在移动设备上以纵向方式查看，则想要连续显示2个图块模式。我可以为此做一些替代方案。

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应该无法实现您的目标，因为该项目被限制在居中的柔性线及其兄弟之间。

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

Chrome通常会（例如，请参阅here和here），似乎考虑了逻辑用户行为以改善用户体验（他们称之为intervention）

无论如何，一旦删除align-content: center，stretch默认值将再次接管，并且您的弹性项目可以沿着容器的整个高度自由移动。

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

Answer 2

您可以对数字使用绝对定位：

.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;
	position:relative;
}

.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;
	text-align:center;
}

.tile:before {
	counter-increment: tileNum;
	content: counter(tileNum);
	align-self: flex-start;
	flex-grow:0;
	font-size: 16px;
	position:absolute;
	top:0;
}
.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>

伪元素未在左上角对齐

2 个答案: