一箇中年girl的技能遺忘清單——曾今理解的Flex是錯誤的
20181123技能遺忘清單
- flex的用法
- rem的計算方式
- font發光，字型效果
寫給未來的自己，也許幾個禮拜，也許幾年。
今天突然接到一個任務，做一個專題。那麼我肯定用html+css+js寫，但是由於我寫了大半年的小程式，我已經忘記了動畫怎麼寫，特效怎麼寫，甚至連單位佈局都忘記了。
於是我開始百度/谷歌，像一個初學者一樣，一步一個腳印。寫頁面的速度慢的連我自己都無法想象，一個移動端的頁面，我居然除錯了一天。按照以前這個複雜的頁面我只需要2小時。
可憐弱小又無助。
所以記錄一下技能點，以備不時之需。也許下一次寫網頁又是半年後了呢。
在整理的過程中，竟然發現以前理解的一些東西是錯誤的。
寫給自己的flex筆記
關於flex是我之前一直用的佈局，由於瀏覽器的限制，我每次寫都要查詢相容模式。這次查了下canIuse，關心了下flex當前的支援程度。除了ie令人捉急，其他的沒毛病。所以這次我寫flex只加了-webkit-這一個字首的相容以防萬一。
重點！Flex的css3數行都和這個重要的概念有關。flex一共有兩根軸：main axis和cross axis，大家一般認為主軸就是水平，交叉軸就是垂直的。但是！這是錯誤的！請與水平垂直這兩個方位的概念區分開，這是一個方位，如果說當年定義的時侯為什麼不命名為vertical&horizon？？原因就是main axis沒有一個固定的方位，所以請不要再通過水平垂直的方位來理解了。那麼主軸是怎麼區分的呢？其實很簡單按照當前flex的方向，是水平排列還是垂直排列。如果是水平排列（row），主軸就是水平的，交叉軸就是垂直的，反之亦然。這是一個很重要的概念。
flex容器的引數：
- flex-direction：
- row（從左到右預設）
- row-reverse（從右到左）
- column（從上到下）
- column-reverse：（從下到上）//確認主軸的方向
- flex-wrap（和word-warp一樣控制換不換行）:
- nowrap（不換行，大家擠一擠，預設）
- wrap（正常向下換行）
- wrap-reverse（逆流而上換行）
- justify-content:
- flex-start（頭）
- flex-end（尾）
- center（中間）
- space-between（頭尾然後中間散開）
- space-around（有點像margin：0 XXpx的感覺）//按照主軸排列flex專案
- align-items：
- flex-start（頭）
- flex-end（尾)
- center（中間）
- baseline（基準線）
- stretch（頂天立地）;//按照交叉軸對齊flex專案
flex佈局下的元素：
- flex-shrink：0（不縮小）|1（能屈）
- flex-grow：0（屹立不動）|>1（能伸）
- flex-basis: 固定大小//如果使用百分比，那就是按照主軸的方位來的，如果是水平的就是寬度的%，垂直就是高度的%
- flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]（上述三個引數的簡寫）
佈局結構一：N個相同元素的並列
遇到這樣的佈局，尤其是移動端，我的內心是拒絕的。普通的操作是用float佈局，然後%控制定義元素寬度。但是這樣元素之間的間距就很難控制，一個不小心最後一個元素就會掉到第二行。這個時候我們要用新技術flex來佈局，flex的彈性功能我很看好。那麼這個佈局的好處是什麼呢？就是即使每個元素高度不一樣，他也會一行一行排好，而不是像float一樣，如果元素的高度又高低，那麼就很容易錯位。而且float也沒有伸縮自如的功能。主要是我可以和margin sya goodbye！另外，注意flex換行之後，如果設定了 justify-content:space-between; ，元素之間就會自動留出相同的空隙，並且頭尾緊貼。
.flexbox{
width:320px;
display:flex;
margin-bottom:30px;
}
.flex1{
flex-wrap:wrap;
justify-content:space-between;
background:#444;
}
.flexbox .item{
flex:0 0 23%;
width:23%;
height:80px;
background:#eee;
margin:10px 0;
}
複製程式碼
佈局結構二：垂直居中
一般這種垂直居中的佈局我們會用 position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);/*或者margin:-xx*/ ；但是這種佈局是固定的，無法伸縮自如，那麼換成了flex會怎麼樣呢？很可惜是垂直排列換行的需求感覺效果很不錯，可惜需要在一個固定的容器內。所以這裡，我們可以加上flex-shink，讓他收縮。同時不要加上 flex-wrap:wrap; ，不然優先換行。這樣就可以實現垂直居中了。
.flex2{
flex-direction:column;
align-items: center;
justify-content: space-around;
height:320px;
}
.flex2 .item{
margin:10px 10px;
flex:0 1 25%;
}
複製程式碼
佈局結構三：搜尋框，一固定一隨意伸縮
這個佈局可以說是很經典，相信大家日常也在用。那麼沒有flex的時候我們是怎麼實現的呢？一般是隨意伸縮的元素寬度100%，然後利用 padding-left:固定元素的寬度px;box-size:border-box; ，預留固定的位置。然後固定的元素定位absolute定位到這個預留的位置，好了完成了。那如果是flex？一個 flex-shrink:1|flex:0 1 auto; 即可解決所有問題。
.flex3{
align-items:center;
flex-wrap:no-wrap;
}
.flex3 .item{
height:40px;
line-height:40px;
}
.flex3 .item:first-child{
flex:0 1 100%;
}
.flex3 .item:last-child{
flex:0 0 25%;
margin-left:1%;
text-align:center;
}
複製程式碼
ofollow,noindex">程式碼連結點選這裡~
可以參考的flex文章：
rem的計算方式
搞定了佈局，我開始思考用什麼單位。為了保證移動端不變性，首選rem。但是rem是怎麼計算的？按了半天的計算器，我已經遺忘了rem的計算方式。畢竟小程式都是rpx，基本上就是設計稿照搬過去px變成rpx即可。
rem也就是font size of the root。他的原理，簡單的說就是在html上設定字型，然後整個頁面的字型基準就是來自於html的字型大小，也就是說所有的參照物都是一個，這樣方便計算。至於root怎麼計算的，一般就是按照設計稿的大小，如果是640px的設計稿，那麼就按照640px的螢幕下是100px大小的基準來，如果是750px的設計稿，那麼就按照750px下100px的基準來。這樣px就不用換算了，直接除以100，就可以了。
想用vm，vh
然後vm的支援，還不夠完美。
vm/vh是直接按照螢幕的尺寸來的，因此可以適配各種螢幕，比如我想要頁面height：100%，通常做法是html,body{height:100%}，這樣設定之後我們才可以使用element{height:100%}，但是這樣會影響其他元素，也許這個頁面我只是需要這一個元素100%呢？使用js也可動態控制大小，但是太麻煩了，這個時候我們就可以用height：10vh（因為1vh就是10分之一的螢幕高度），這樣就是100%了。
字型發光效果
最近設計師很喜歡字型帶有外發光的效果，這讓我們很難做啊。如果是固定的字型，切圖就可以了。但是如果是動態的，難道每次都切圖嗎。不不不，耗時耗力。這個時候text-shadow幫你打造華麗的bilingbiling效果。
當然在使用之前，我還是先查了一波canIuse，發現支援率還不錯，可以放心地用了。
這個語法很簡單，但是可以有很多玩法。如果需要做外發光地話，只需要偏移量都設定為零，然後設定模糊半徑和陰影顏色即可。
text-shadow:X偏移量 Y偏移量 模糊半徑 陰影顏色; 複製程式碼
這個屬性最友愛地地方一是可以有很多陰影，二是陰影動畫效果很絢麗。
.textShadowChange{
///...
animation: bilingbiling 2s ease infinite alternate;
}
@keyframes bilingbiling {
from {
text-shadow: 0 0 1px white,
0 0 2px white,
0 0 4px pink,
0 0 8px pink;
}
to {
text-shadow: 0 0 5px white,
0 0 10px white,
0 0 18px red,
0 0 20px red;
}
}
複製程式碼