Html Question posted in
Some basic documentation can be found here.

Html – Why is my flexbox container wrapping my divs on the big sceen and not only on the small one?

just getting started with flexbox.
After managing to align img div and text div, I added the "felx-wrap:wrap" to the container so that img and text would be stacked on top of each other on smaller screens. Now they are always stacked on top of each other. Why? Do I need a media query?

HTML:

<div class="banner-container">
            <div class="banner-img">
                <img src="https://www.region-muenchen.com/fileadmin/region-muenchen/Dateien/Fotos_Abb/Landkreiskarten/DAH_Ausschnitt.jpg" alt="map Dachau area">
            </div>
            <div class="intro-text">
                <h1>Something</h1>
                <h4>Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something </h4>
            </div>
        </div>

CSS:

.banner-container{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
}

.intro-text{
  border: 2px solid blueviolet;
  margin: 10px;
}

.banner-img{
  border: 2px solid blue;
  max-width: 50%;
  margin: 10px;
}

.banner-img img{
  width: 100%;
  height: auto;
}

I was expecting to stack my divs only when there isnt enough space to display them next to each other.

Tags:

3

Answers


  1. 0

    Can you use this css code

     .banner-container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-content{
  display: flex;
  flex-wrap: wrap;
}

.intro-text{
  border: 2px solid blueviolet;
  width: 45%;
  margin: 10px;
}

.banner-img{
  border: 2px solid blue;
  width: 45%;
  margin: 10px;
}

.banner-img img{
  width: 100%;
  height: auto;
}
    Login or Signup to reply.
  2. 0

    It’s because the intro-text div is taking 100% width, you have two options make some css media queries to control the behaviour for different screen sizes, or you can simply add flex: 1; to make both intro-text and .banner-img which will make both elements have the same weight in the flexbox.

    updated css:

    .banner-container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
}

.intro-text{
  flex:1;
  border: 2px solid blueviolet;
  margin: 10px;
}

.banner-img{
  flex:1;
  border: 2px solid blue;
  max-width: 50%;
  margin: 10px;
}

.banner-img img{
  width: 100%;
  height: auto;
}
    Login or Signup to reply.
  3. 0

    Here’s the code, refined:

    .banner-container{
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/*this is the only code you need to add */
.banner-container div {
    min-width: 400px; /*you can change this value*/
    flex: 0 0 40%;
}

.intro-text{
  border: 2px solid blueviolet;
  margin: 10px;
}

.banner-img{
  border: 2px solid blue;
  max-width: 50%;
  margin: 10px;
}

.banner-img img{
  width: 100%;
  height: auto;
}
    <div class="banner-container">
            <div class="banner-img">
                <img src="https://www.region-muenchen.com/fileadmin/region-muenchen/Dateien/Fotos_Abb/Landkreiskarten/DAH_Ausschnitt.jpg" alt="map Dachau area">
            </div>
            <div class="intro-text">
                <h1>Something</h1>
                <h4>Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something </h4>
            </div>
        </div>

    Explanation:

    Setting ‘min-width’ will make sure that child divs take the least needed width, and if is not fitting, then it will stack.
    Setting ‘flex: 0 0 40%’ will make sure the child divs are one beside the other on larger screens.

    I hope this helps! 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search