Мисс-флекс под стойкой

Проблема в том, что когда я изменяю размер окна, изображение.gallery-1 переходит под 2 изображения ниже, но когда я изменяю направление flex-direction: столбец.gallery это решает проблему, я хочу знать, в чем разница или что происходит

*---  Gallery section  ---*/


.main-gallery {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
}
.main-gallery h1 {
}

.gallery {
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
   flex:1; 


}
.gallery img {
  width: 100%;
  height: 100%;

}
.gallery-2 {
  flex-direction:row;
  justify-content:space-between;
}

.left-side {
  flex:1;
  margin-right:0.3em;
}

.right-side {
flex:1;
}

<!DOCTYPE html>
<html>
  <body>
    <!--    gallery sections    -->
                <div class="gallery-1  gallery">
                  <img src="http://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="Room Gallery img ">
              </div>

                <div class="gallery-2 gallery">
                    <div class="left-side">
                      <img src="http://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="Room Gallery img ">
                    </div> <!--left-->

                    <div class="right-side">
                      <img src="http://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="Room Gallery img ">
                    </div><!--right-->
                </div>

                <div class="gallery-3  gallery">
                  <img src="http://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="Room Gallery img ">
              </div>

            </div><!--    Main  Gallery End       -->

  </body>
</html>
Источник

0 ответов

Другие вопросы по тегам