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 endS3：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 endS4：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 endS4-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();