Question

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

Answer 1

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

您的动态文本位于方格下方，使操作变得容易，例如，当 flex项目换行时，换行 flex线将会调整到动态行中的动态文本的高度。

请参见下面的演示

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

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

1 个答案: