CSS - 防止文本换行符破坏弹性对齐答案

【问题标题】：CSS - prevent text newlines from breaking flex alignmentCSS - 防止文本换行符破坏弹性对齐
【发布时间】：2019-07-21 11:57:07
【问题描述】：

我有以下 CSS，它允许我创建一个根据屏幕大小换行的行。如果有足够的空间，所有项目都出现在一行上，否则它会以正确的对齐方式换行到下一行。

我的问题是我在每个“方形”div 下都有一个描述文本。如果此文本只有一行，则没有问题，但如果此文本为 2 行或更多行，则其下方的正方形会被向上推，不再与其兄弟对齐。我怎样才能防止这种情况？我已经将示例代码作为 sn-p 包含在内，它最容易以全屏视图打开以查看我在说什么。我希望正方形的顶部始终对齐

.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 属性，但如果文本占用 2 行或更多行，我无法对齐正方形。

【问题讨论】：

标签： html css flexbox alignment

【解决方案1】：

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

您的 动态文本 在 squares 下方使事情变得简单，因为当 flex 项目 换行时，换行 flex 行 em> 将调整到前面 flex line 中 动态文本 的高度。

请看下面的演示：

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

【讨论】：

事后看来，这似乎很明显，但我面临弹性挑战，非常感谢，这让我很头疼。问题，为什么行仍然填充屏幕的宽度而没有 align-self 拉伸？我认为我需要它来正确应用证明内容，或者至少像 width: 100% 或 flex: 1 或其他东西
那是因为你的 square 和 sub-row 有一个 defined 宽度，所以它们填充了行然后换行...
但即使只渲染了一个正方形，主行也会填满屏幕的整个宽度。即使我删除所有宽度属性并保留单个文本节点，它也是合理的
渲染了一个正方形，使用 justify-content: space-evenly 添加到您的 flexbox...
你已经非常有帮助了，而且解释更是如此。我想我有被省略号激怒的习惯，哈哈，没有难过的感觉