原始代碼。

<div style="display: flex; flex-direction: column;">
  <a href="xxxxxx" target="_blank" style="text-decoration: none; display: flex; align-self: stretch; align-items: flex-start; flex-shrink: 0; padding: 8px 0px; cursor: pointer;">
    <img
      src="public/common/like&comment.png"
      alt="like&comment"
      style="width: 68px; height: 68px; align-self: stretch;"
    />
    <div style="display: flex; flex-grow: 1; align-self: stretch; align-items: center; color: #212121; margin-left: 16px;">
      This is a testing title to be perform- Important topic to be announce
    </div>
  </a>

  <a>
    .....
  </a>
</div>

這是它看起來的樣子。

當(dāng)我試圖添加或其他標(biāo)簽時，文本會被弄亂，變成兩塊。怎么才能讓它有一個正確的順序？

<div style="display: flex; flex-direction: column;">
  <a href="xxxxxx" target="_blank" style="text-decoration: none; display: flex; align-self: stretch; align-items: flex-start; flex-shrink: 0; padding: 8px 0px; cursor: pointer;">
    <img
      src="public/common/like&comment.png"
      alt="like&comment"
      style="width: 68px; height: 68px; align-self: stretch;"
    />
    <div style="display: flex; flex-grow: 1; align-self: stretch; align-items: center; color: #212121; margin-left: 16px;">
      This is a testing title to be perform- <strong>Important topic to be announce</strong>
    </div>
  </a>

  <a>
    .....
  </a>
</div>

原因是你用了display:flex；在要添加& ltstrong & gt...& lt/strong & gt；元素。而你的& ltstrong & gt元素現(xiàn)在被視為flex-item，它根據(jù)提到的flex屬性進(jìn)行拆分。現(xiàn)在有一個父對象有兩個flex項，您的普通文本和您的& ltstrong & gt元素，這就是為什么它的行為是這樣的。

你需要做的就是移除display:flex；從分部。類似這樣的東西會幫你做到。

<div style="color: #212121; margin-left: 16px;">
      This is a testing title to be perform- <strong>Important topic to be announce</strong>
    </div>