时间戳

首页 > 解决方案 > CSS - 防止文本换行符破坏弹性对齐

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

问题描述

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

标签： htmlcssflexboxalignment

解决方案

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

您的动态文本位于正方形下方使事情变得容易，因为当flex 项目换行时，换行的flex行将调整为前面的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>

推荐阅读