鍍金池/ 問答/HTML/ flex布局高度

flex布局高度

圖是正方形的，外面的item也想是正方形，但是不知道問什么就高出很多
clipboard.png

<!doctype html>
<html>

<head>
   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">

   <title>PageSlider Demo</title>
   <style>
      html,
      body {
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
         overflow: hidden;
      }

      .pages {
         width: 100%;
         height: 100%;
         position: relative;
      }

      .page {
         font-size: 100px;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         overflow: hidden;
         transform: translate3d(0px, 100%, 0px);
         -webkit-transform: translate3d(0px, 100%, 0px);
         -moz-transform: translate3d(0px, 100%, 0px);
         transition: transform .5s ease-out;
         -webkit-transition: -webkit-transform .5s ease-out;
         -moz-transition: -moz-transform .5s ease-out;
      }

      .page1 {
         background: url(image/background_01.png);
         background-size: contain;
      }

      .page2 {
         position: absolute;
         /*background: url(image/employee_03.png);*/
         background-size: 100% 100%;
      }

      .page3 {
         position: absolute;
         background: url(image/background_03.png);
         background-size: 100% 100%;
      }

      .fg-image1 {
         width: 100%;
         height: auto;
         position: absolute;
         z-index: -1;
      }

      .fg-image2 {
         width: 100%;
         height: auto;
         position: absolute;
         z-index: -1;
         margin-top: 30px;
      }

      .fg-image3 {
         width: 100%;
         height: auto;
         position: absolute;
         z-index: -1;
      }

      .flex-box {
         height: 100%;
      }

      .flex-box .left {
         width: 25%;
         height: 100%;
         background: #ffffff;
         float: left;
      }

      .flex-box .right {
         width: 70%;
         float: left;
         display: -webkit-box;
         display: -moz-box;
         display: -ms-flexbox;
         display: -webkit-flex;
         display: flex;
         -webkit-box-align: flex-start;
         -ms-flex-align: flex-start;
         -webkit-align-items: flex-start;
         align-items: flex-start;
          flex-wrap: wrap;
         height: auto;
      }

      .flex-box .right .item {
         flex: 0 0 33.33%;
         padding: 5px;
         box-sizing: border-box;
      }

      .flex-box .right .item img {
         width: 100%;
      }
      /* the box animation */

      .box {
         width: 100px;
         height: 100px;
         background: black;
      }

      .play .myAnimation {
         animation: move 1s ease 1 both;
         -webkit-animation: move 1s ease 1 both;
      }

      @-webkit-keyframes move {
         100% {
            -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
            -ms-transform: translate3d(150px, 0, 0);
         }
      }
   </style>
</head>

<body>

   <div class="pages">
      <div class="page page1">
         <!-- 第一頁 -->
         <img class="fg-image1" src="image/forground_01.gif" />
      </div>
      <div class="page page2">
         <!-- 第二頁 -->
         <div class="flex-box">
            <div class="left">

            </div>
            <div class="right">
               <div class="item">
                  <img class="" src="image/1.png" />
               </div>
               <div class="item">
                  <img class="" src="image/2.png" />
               </div>
               <div class="item">
                  <img class="" src="image/3.png" />
               </div>
               <div class="item">
                  <img class="" src="image/4.png" />
               </div>
               <div class="item">
                  <img class="" src="image/5.png" />
               </div>
               <div class="item">
                  <img class="" src="image/6.png" />
               </div>
               <div class="item">
                  <img class="" src="image/7.png" />
               </div>
               <div class="item">
                  <img class="" src="image/8.png" />
               </div>
               <div class="item">
                  <img class="" src="image/9.png" />
               </div>
               <div class="item">
                  <img class="" src="image/10.png" />
               </div>
               <div class="item">
                  <img class="" src="image/11.png" />
               </div>
               <div class="item">
                  <img class="" src="image/12.png" />
               </div>
               <div class="item">
                  <img class="" src="image/13.png" />
               </div>
               <div class="item">
                  <img class="" src="image/14.png" />
               </div>
               <div class="item">
                  <img class="" src="image/15.png" />
               </div>
               <div class="item">
                  <img class="" src="image/16.png" />
               </div>
               <div class="item">
                  <img class="" src="image/17.png" />
               </div>
               <div class="item">
                  <img class="" src="image/18.png" />
               </div>
            </div>
         </div>
         <!-- <img class="fg-image3" src="image/employee_03.png" /> -->
         <!-- <div class="box myAnimation"></div> -->
      </div>
      <div class="page page3">
         <!-- 第三頁 -->
         <img class="fg-image2" src="image/forground_03.gif" />

      </div>
   </div>


   </div>
</body>


</html>
回答
編輯回答
菊外人

彈性容器下的元素沒有設置寬高的話就遵循彈性盒子的排列方式，http://www.ruanyifeng.com/blo...
多去學學吧~~

2018年1月16日 14:57
編輯回答
夢若殤

自己找到原因了

  .page {
     font-size: 100px;
   }
   導致的
2018年4月10日 02:08