Question

问题是，当我调整窗口大小时，.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 个答案: