CSS - 防止文本换行破坏弹性盒子对齐

Question

CSS - 防止文本换行破坏弹性盒子对齐

3

我有以下CSS，它允许我创建一个在屏幕大小基础上换行的行。如果有足够的空间，所有项目都会显示在一行中，否则会换到下一行并正确对齐。

我的问题是，在每个“正方形”div下面有一个描述文本。如果这个文本只有一行，那么没有问题，但如果这个文本有2行或更多行，它下面的正方形就会被推上去，不再与其兄弟对齐。如何避免这种情况？我已经包含了示例代码作为片段，最好将其打开为全屏视图以查看我所说的内容。我希望正方形的顶部始终对齐。

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-self: stretch;
}

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.sub-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 300px;
}

.square {
  height: 250px;
  width: 250px;
  background-color: #900;
}

<body>
  <div class="flex-row">
    <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text Placeholder text Placeholder text Placeholder text Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
  </div>
</body>

我尝试将列对齐方式设置为 flex-start 和 flex-end，但不起作用。我还尝试使用 p 元素的 align-self 属性进行了调整，但无法使正方形对齐，如果文本超过两行以上。

- Robbie Milejczak

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kukkuz · Accepted Answer

将flex-row的align-items: flex-start赋值（这将覆盖默认的stretch行为）。

由于动态文本位于正方形下方，因此当弹性项换行时，换行的弹性线将根据前面弹性线中动态文本的高度进行调整。

请参见以下演示：

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  /* align-self: stretch;*/
  align-items: flex-start; /* ADDED */
}

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.sub-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 300px;
}

.square {
  height: 250px;
  width: 250px;
  background-color: #900;
}

<body>
  <div class="flex-row">
    <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text Placeholder text Placeholder text Placeholder text Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
  </div>
</body>