如何使用CSS和/或Flexbox实现动态布局？

Question

我有一个Rails应用程序，用户可以在其中搜索地名，并且在搜索后将图像加载到同一页面上。我希望它使搜索框垂直和水平居中，并位于页面中间。搜索完成后，图像会加载到同一页面上，我希望它出现在搜索框下方，而搜索框现在位于顶部。基本上，当按下按钮时，会添加图像的HTML，然后看起来应该像第二个图像。请原谅我用两张图片展示这个错误的尝试。我该如何实现？

这是我的HTML代码：

<div class="page-wrapper">
  <h1 class="title">The weather in GIFs</h1>

  <div class="search">
    <%= form_tag(current_weather_forecasts_path, method: :get) do %>
      <%= text_field_tag :q, nil, placeholder: "Enter a city", class: "search-field" %>
      <%= button_tag type: 'submit', class: "search-button" do %>
        <i class="fas fa-search"></i>
      <% end %>
    <% end %>
  </div>

  <% if @forecasts_facade.invalid_city? %>
    <p>Please use a valid city name!</p>
  <% elsif @forecasts_facade.missing_city? %>
    <p>Please type in a city name!</p>
  <% elsif @forecasts_facade.forecast == {} %>
  <% else %>
    <p class="weather-description"><%= "#{@city.capitalize}: #{@forecasts_facade.description}" %></p>
    <div class="gif-container"><%= image_tag(find_gif_url, class: "gif") %>
      <span class="temperature weather-attribute"><%= "#{@forecasts_facade.temperature}°C" %></span>
      <span class="wind weather-attribute"><%= "wind:#{(@forecasts_facade.wind * 3.6).to_i}km/h" %></span> <!-- converts to km/hr -->
      <span class="humidity weather-attribute"><%= "humidity:#{@forecasts_facade.humidity}%" %></span>
    </div>
  <% end %>
</div>

Answer 1

这就是您想要的？？？ 尝试删除gif-container div输入将居中，如果要添加gif-container，则两者将在一起

.page-wrapper {
  height: 100vh;
}

.container {
      display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    justify-content: space-evenly;
}

.gif-container {
  height: 300px;
  width: 400px;
  background: red;
}

<div class="page-wrapper">
<!--   <h1 class="title">The weather in GIFs</h1> -->
  <div class="container">
    <div class="search">
      <input />
    </div>
    <div class="gif-container">
    </div>
  </div>
</div>