一箇中年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;
}
複製代碼

代碼連接點擊這裏~

能夠參考的flex文章：

阮一峯老師的

a guide to flexbox

CSS 伸縮盒佈局模組(W3C)

rem的計算方式

搞定了佈局，我開始思考用什麼單位。爲了保證移動端不變性，首選rem。可是rem是怎麼計算的？按了半天的計算器，我已經遺忘了rem的計算方式。畢竟小程序都是rpx，基本上就是設計稿照搬過去px變成rpx便可。

rem也就是font size of the root。他的原理，簡單的說就是在html上設置字體，而後整個頁面的字體基準就是來自於html的字體大小，也就是說全部的參照物都是一個，這樣方便計算。至於root怎麼計算的，通常就是按照設計稿的大小，若是是640px的設計稿，那麼就按照640px的屏幕下是100px大小的基準來，若是是750px的設計稿，那麼就按照750px下100px的基準來。這樣px就不用換算了，直接除以100，就能夠了。

想用vw，vh

而後vw的支持，還不夠完美。

vw/vh是直接按照屏幕的尺寸來的，所以能夠適配各類屏幕，好比我想要頁面height：100%，一般作法是html,body{height:100%}，這樣設置以後咱們纔可使用element{height:100%}，可是這樣會影響其餘元素，也許這個頁面我只是須要這一個元素100%呢？使用js也可動態控制大小，可是太麻煩了，這個時候咱們就能夠用height：100vh（由於1vh就是100分之一的屏幕高度），這樣就是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;
  }
}
複製代碼

更多語法參考MDN

代碼連接

後記

終於整理完了，之後多整理整理，查漏補缺。我這個中年girl地記憶力也是沒誰了。

ps：感謝processon這麼好的做圖工具，加速了個人寫做過程。