How do I achieve a dynamic layout with CSS and/or Flexbox?

Question

I have a rails app where a user can search for a place name and when after they search an image is loaded onto the same page. I would like it so that my search box is centered vertically and horizontally and is in the middle of the page. Once a search is made an image is loaded to the same page and I would like this to appear under the search box, with the search box now being at the top. Basically the HTML for the image is added when a button is pressed and it should then look like the second image. Excuse my poor attempt at showing this in two images. How do I achieve this?

Here is my HTML code:

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

Possible duplicate of [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — JL Griffin, Jul 20 '19 at 13:17
@ShubhanuSharma I don't know how to make a jsfiddle. basically the page looks like image one and then when you press a button the image (big box) is added to the html. — Steve, Jul 20 '19 at 14:02
@ShubhanuSharma One is required to post the markup here, within his question, and not a jsfiddle: [mcve] — Rob, Jul 21 '19 at 12:10
@Rob thanks for advice but i just asked because there were no css and no working snippet so i thought that would be batter if i'll get working version of it. anyhow when Steve told that he don't know i've done and posted the and below. and by jsfiddle i just mean that working example would be great. — Shubhanu Sharma, Jul 22 '19 at 04:57
@ShubhanuSharma When a question does not contain code, you should vote to close the question and not answer it. https://stackoverflow.com/help/how-to-answer Stack Overflow is not a code writing service and you should do no such thing. In fact, this question is one vote away from being closed. — Rob, Jul 22 '19 at 10:02
Apologies i didn't read guidelines. Thanks for update man. i'll follow this in future. — Shubhanu Sharma, Jul 22 '19 at 10:06

score 0 · Answer 1 · answered Jul 20 '19 at 14:33

This is what you want ??? Try removing gif-container div input will be centred and if you will add gif-container then both be be together

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

How do I achieve a dynamic layout with CSS and/or Flexbox?

1 Answers1