最新上架(P1)

Flex練習

一、page1.html：Flex練習

範例結果
S1：html結構

  <h2>首頁</h2>
  <h3>最新上架</h3>
    <ul class="flexbox">
      <li>
        <div class="title">瓦力</div>
        <p>公元2805年，人類文明高度發展，卻因污染和生活垃圾大量增加使得地球不再適於人類居住。地球人被迫乘離開故鄉，進行漫長無邊宇宙之旅。<br>
          臨行前委託Buynlarge的公司對地球垃圾進行清理，該公司開發了名為WALL·E的機器人擔當此重任。 <br>
          這些機器人按照程序日復一日、年復一年辛勤工作，WALL·E們接連損壞、停止運動。最後只有一個仍在進行這項似乎永無止境的工作...</p>
      </li>
      <li>
        <div class="title">勇敢傳說</div>
        <p>勇敢的梅莉達抗爭傳統束縛，追求自由從而改變自己命運。<br>
          梅莉達是佛格國王與艾莉諾皇后的長女，她是一名出色的弓箭手，也有任性不羈，《勇敢傳說》講述的就是她的冒險故事。</p>
      </li>
      <li>
        <div class="title">天外奇蹟</div>
        <p>78歲高齡、喪偶的Carl，終其一生都希望與老婆Ellie去探險，然而一直到老婆去世都沒機會完成心願。<br>
          在即將被送進養老院之時，他有個瘋狂的想法──用無數氫氣球讓房子變成飛行器，飛去完成老婆的願望，沒想到一個9歲的陌生小男孩卻意外一起困在房子...</p>
      </li>
      <li>
        <div class="title">獅子王</div>
        <p>當年辛巴的父親木法沙被奸人迫害而死，小辛巴為了躲過一劫，逃離了動物王國。<br>
          辛巴在叢林中慢慢長大，最終長成了雄壯的雄獅，並邂逅了自己美麗的公主。由於有了丁滿和彭彭這對活寶，使得平凡的生活也笑料百出。</p>
      </li>
      <li>
        <div class="title">怪物史瑞克</div>
        <p>史萊克生活在平凡的世界中——他本身是一個其貌不揚的怪物，綠色的身體，古怪的脾氣，不愛乾淨的懶散生活。在殘暴的國王還掠奪了一個美麗非凡的公主，打算強佔為妻。<br>
          史萊克雖說醜陋，卻心內善良。在領主的威逼下，無奈下他只能前去搭救公主，他能不能闖過難關，上演完美的英雄救美童話？</p>
      </li>
      <li>
        <div class="title">白雪公主與小矮人</div>
        <p>白雪公主原本是世界上最幸福的人，可惜當她母后逝去，父王娶了她繼母后，這一切都改變了。<br>
          這天，皇后從魔鏡中得知世上最美的人不是自己而是白雪公主後，氣急敗壞的她下令武士將她帶到森林處決了...</p>
      </li>
    </ul>

S2：利用Flex進行排版美化

SCSS美化

SCSS @for 循環【參考連結】

for循環有兩種形式，分別為：@for $var from through 和@for $var from to 。
$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

.flexbox{
  // background: #f0ff90; border: 1px solid red;
  display: flex;
  width: 90%; height: 60vh; margin: 20px auto;
  li{
    // border: 1px solid blue;
    box-shadow: -1px 0 3px #000;
    flex: 1;
    @for $i from 1 through 6{
      &:nth-child(#{$i}){
        background: url(../images/p1/flex0#{$i}.jpg);
        background-size: cover;
      }
    }  //for end
    .title{
      font-size: 1.1em; padding: 10px;
      color: #fff; text-shadow: 1px 1px #000;
    }
    p{
      display: none;
    }
    &.open{
      flex: 12;
    }
  }  //li end
}  //flexbox end

S3：Flexbox li 打開時，【.title】改為橫向、【p】置於li 中央
直書CSS參考：【參考1】、【參考2】

SCSS美化

.flexbox{
  overflow: hidden; /* S5原因 */
  li{
    display: flex;  /* S3原因 */
    position: relative;   /* S5原因 */
    .title{
      // S1：直書
      writing-mode: vertical-rl;    /* 直書 */
    }
    p{
      display: none;
      // S5：置於 li 正中央
        text-align: left; font-size: .9em;
        background: rgba(255, 255, 255, 0.521);
        box-shadow: 1px 1px 3px #000;
        border-radius: 20px;
        padding: 20px;
        width: 80%;
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%,-50%);
    }
    &.open{
      .title{
        // S2：li打開時，改為橫向
          writing-mode: lr-tb;    /* 橫書 */
          // writing-mode: horizontal-tb;
        // S3：改為橫書時，.title 置於下方
          align-self: flex-end;
        // S4：置於下方後，置中設定
          text-align: center;  flex: 1;
          // background: rgba(255, 255, 255, 0.462);    /* 測試寬度用 */
      }
    }
  }  //li end
}  //flexbox end

S4：JQ設定

S4-1：在html結構中，將p動畫改變方向的元素，在其父元素【li】中加入【class=”toLeft”】或【class=”toTop”】

    <ul class="flexbox">
      <li class="toLeft">
        <div class="title">瓦力</div>
        <p>...</p>
      </li>
      <li class="toTop">
        <div class="title">勇敢傳說</div>
        <p>...</p>
      </li>
    </ul>

S4-1：CSS預設美化

.flexbox{
  li{
    cursor: pointer;
    transition: all .5s;
    p{
      display: none;
        // left: 50%; top: 50%;   /* 移除，利用加class預設位置 */
        transform: translate(-50%,-50%);
    }
    &.open{
      p{
        display: block;
      }
    } //li.open end
    &.toLeft p{
      top: 50%; left: 200%;
    }
    &.toTop p{
      top: 200%; left: 50%;
    }
  }  //li end
}  //flexbox end

S4-1：JQ參考： is( ) 方法、animate()方法、jQuery動畫說明、selectors選取器

    $('.flexbox li').click(function(){
      // S1：click li時 新增【.open】其餘則移除
        $(this).addClass('open').siblings().removeClass('open');
      // S2：有【.toTop】則p向上移動，否則向左移動
        if($(this).is('.toTop')){
          $(this).children('p').animate({top:'50%'},1000);
        }else{
          $(this).children('p').animate({left:'50%'},1000);
        }
      //  S3：li未打開，則回到原位
      $('.flexbox li:not(.open)').children('p').css({top:'',left:''});
    });
    // S4：移除html結構中，預設有【.open】刪除，利用程式啟動
      $('.flexbox li:last-child').click();