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();