我如何 position h1 元素相對於其他元素？

Question

我需要使用網格 css 或 flex 正確（無硬編碼）position h1 元素。 所有這些元素都存儲在大小相等的列中。 在一條線上。 當屏幕變小時，我需要將 element1 & element2 放在 h1 測試下方。 該任務的細節不允許在 css 中使用 @media 來進行各種屏幕擴展。 因此，我寫在這里，因為我不明白如何做到這一點。

我需要這個 position 的元素

<article id="MyContainer">
      <div>
        <h1>SOME TEXT</h1> ----- i need to change this 
        <div id="buttonsZone">
          <button id="button1" class="btn-secondary">
          <span>
            <img src="myTest.svg">
          </span>
            <span>element 1</span>
          </button>
          <button id="button2" class="btn-secondary">
          <span>
            <img src="myPicture.svg">
          </span>
            <span>element 2</span>
          </button>
        </div>
      </div>
 </article>


article div:first-of-type {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 20px;
    align-items: center;
    vertical-align: middle;
}
 
article .btn-secondary {
    padding: 10px;
  }

Answer 1

這是使用 flexbox 的一種方法。

 .container { display: flex; align-items: center; border: 1px solid; padding: 10px; flex-wrap: wrap; } h1 { flex-grow: 1; }

 <div class='container'> <h1> h1 text </h1> <div> <button> button 1 </button> <button> button 2 </button> </div> </div>

另外，看看這個有用的flexbox 指南。