如何阻止flexbox專案移動？-有解無憂

所以我嘗試創建一個注冊頁面，顯示為 flex，所以在左邊我會有一些“歡迎..等”文本，在右邊是注冊表單。我還有一個 JS 腳本，因此只要表單中的輸入不“好”，<small>就會在輸入下方顯示一條訊息；問題是，每當執行腳本并<small顯示一條訊息時，我的 flex 都會調整大小，并且左側的訊息會向下移動一點。有沒有辦法在不使用的情況下實作這一目標position: sticky？

我會在這里發布一個代碼片段和 2 張照片；

代碼

function myFunction(input) {
  var x = document.getElementsByClassName("message");
  for (let i = 0; i < x.length; i  ) {
    x[i].innerHTML = "te pup dulce";
  }
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  background: rgb(206, 212, 212);
  color: #1c1e21;
}

.container {
  padding: 50px;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.container h1 {
  flex-grow: 0;
}

#parent1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

small {
  color: red;
}

<body>
  <div id="header">
    <h1> salll </h1>
  </div>
  <section class="container">
    <div>
      <h1> message </h1>
    </div>
    <div id="parent1">
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
    </div>
  </section>

</body>

如何阻止 flexbox 專案移動？

我知道這是非常基本的，但我幾乎嘗試了所有方法（除了粘性，因為我不想要那個）并且無法弄清楚；

uj5u.com熱心網友回復：

使用預定義的高度，<small>將制定

正如<small>已棄用的評論中所述，您可以將其他容器用于訊息，例如div span....

function myFunction(input) {
  var x = document.getElementsByClassName("message");
  for (let i = 0; i < x.length; i  ) {
    x[i].innerHTML = "te pup dulce";
  }
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  background: rgb(206, 212, 212);
  color: #1c1e21;
}

.container {
  padding: 50px;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.container h1 {
  flex-grow: 0;
}

#parent1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

small {
  color: red;
  height:20px;
}

<body>
  <div id="header">
    <h1> salll </h1>
  </div>
  <section class="container">
    <div>
      <h1> message </h1>
    </div>
    <div id="parent1">
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
    </div>
  </section>

</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348825.html

標籤：html css 弹性盒

上一篇：無法將單擊事件添加到創建物件之前未創建的按鈕

下一篇：react-leafletGeoJSONwithtypescript不渲染geojsonPoints