一箇中年girl的技能遺忘清單——曾經理解的Flex是錯誤的

小美娜娜發表於2018-11-23

20181123技能遺忘清單

  • flex的用法
  • rem的計算方式
  • font發光,字型效果

寫給未來的自己,也許幾個禮拜,也許幾年。

今天突然接到一個任務,做一個專題。那麼我肯定用html+css+js寫,但是由於我寫了大半年的小程式,我已經忘記了動畫怎麼寫,特效怎麼寫,甚至連單位佈局都忘記了。

於是我開始百度/谷歌,像一個初學者一樣,一步一個腳印。寫頁面的速度慢的連我自己都無法想象,一個移動端的頁面,我居然除錯了一天。按照以前這個複雜的頁面我只需要2小時。

可憐弱小又無助。

所以記錄一下技能點,以備不時之需。也許下一次寫網頁又是半年後了呢。

在整理的過程中,竟然發現以前理解的一些東西是錯誤的。

寫給自己的flex筆記

關於flex是我之前一直用的佈局,由於瀏覽器的限制,我每次寫都要查詢相容模式。這次查了下canIuse,關心了下flex當前的支援程度。除了ie令人捉急,其他的沒毛病。所以這次我寫flex只加了-webkit-這一個字首的相容以防萬一。

一箇中年girl的技能遺忘清單——曾經理解的Flex是錯誤的

重點!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個相同元素的並列

一箇中年girl的技能遺忘清單——曾經理解的Flex是錯誤的

遇到這樣的佈局,尤其是移動端,我的內心是拒絕的。普通的操作是用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%;
}
複製程式碼

一箇中年girl的技能遺忘清單——曾經理解的Flex是錯誤的

佈局結構三:搜尋框,一固定一隨意伸縮

這個佈局可以說是很經典,相信大家日常也在用。那麼沒有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;
}
複製程式碼

一箇中年girl的技能遺忘清單——曾經理解的Flex是錯誤的

程式碼連結點選這裡~

可以參考的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,就可以了。

一箇中年girl的技能遺忘清單——曾經理解的Flex是錯誤的

想用vw,vh

然後vw的支援,還不夠完美。

vw/vh是直接按照螢幕的尺寸來的,因此可以適配各種螢幕,比如我想要頁面height:100%,通常做法是html,body{height:100%},這樣設定之後我們才可以使用element{height:100%},但是這樣會影響其他元素,也許這個頁面我只是需要這一個元素100%呢?使用js也可動態控制大小,但是太麻煩了,這個時候我們就可以用height:100vh(因為1vh就是100分之一的螢幕高度),這樣就是100%了。

一箇中年girl的技能遺忘清單——曾經理解的Flex是錯誤的

字型發光效果

最近設計師很喜歡字型帶有外發光的效果,這讓我們很難做啊。如果是固定的字型,切圖就可以了。但是如果是動態的,難道每次都切圖嗎。不不不,耗時耗力。這個時候text-shadow幫你打造華麗的bilingbiling效果。

當然在使用之前,我還是先查了一波canIuse,發現支援率還不錯,可以放心地用了。

一箇中年girl的技能遺忘清單——曾經理解的Flex是錯誤的

這個語法很簡單,但是可以有很多玩法。如果需要做外發光地話,只需要偏移量都設定為零,然後設定模糊半徑和陰影顏色即可。

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這麼好的作圖工具,加速了我的寫作過程。

相關文章