Theme NexT works best with JavaScript enabled

ShunNien's Blog

不積跬步，無以致千里；不積小流，無以成江海。

0%

JS30紀錄 05-Flex Panel Gallery

發表於 更新於 分類於 Disqus：

目標

運用 flex 製作一個動畫展開圖片的效果

flex panel gallery

Demo | Github

處理步驟

一開始的範本頁面如下
origin page

步驟 1

  • 先調整 panels 的 css ，將 display 設定為 flex 配置，此 panels 即為 Flex container
    panels Flex container
  • 設定 panel 的 flex ，將 flex 設定為 1 ，設定一個數字為 flex-grow ，此為容器中空間的指定占比
    panel flex

步驟 2

上一步驟將各個 panel 當作 Flex item ，這一步驟中，將設定巢狀 Flexible box ，並讓元素顯示置中

  • 將 panel 的 display 設定 flex ，讓 panel 當作新的 Flex container ，將 panel 裡面的文字項目元素變成新的 Flex item
  • 設定 .panel > * 此 Flex item 的 flex 為 flex: 1 0 auto;
    chil flex container
  • 設定 justify-content: center; 將文字重新置中
    justify-content
  • 設定 flex-direction: column; 讓文字排列按照 column 調整
    flex-direction
  • 在 .panel > * 設定 display 為 flex ，並加上 justify-content: center; 與 flex-direction: column; ，此設定是為了文字調整置中
    text align

步驟 3

  • 先調整 .panel.open 的樣式，添加 flex 的占比調整
  • 針對文字 tag 的部分，設定 :first-child 與 :last-child 的樣式特效隱藏
  • 加入選取特效 css .panel.open-active

步驟 4

此部分開始 JS 撰寫

  • 取得所有 .panel DOM
  • 建立 toggleOpen function ，並將上述的 DOM 綁定 click 事件
  • 建立 toggleActive function ，並將上述的 DOM 綁定 transitionend 事件

筆記與備註事項

JavaScript 部分

DOMTokenList

DOMTokenList 介面表示了一個以空格作為分隔的內容集，通常來自 Element.classList、HTMLLinkElement.relList、HTMLAnchorElement.relList 或 HTMLAreaElement.relList 等屬性。本介面與 Array 同樣是由 0 開始索引，且 DOMTokenList 是區分大小寫的。

資料來源MDN

DOMTokenList.toggle()

The toggle() method of the DOMTokenList interface removes a given token from the list and returns false. If token doesn’t exist it’s added and the function returns true.

資料來源MDN

CSS 部分

flex

CSS 屬性 flex 規定了彈性元素如何伸長或縮短以適應 flex 容器中的可用空間。這是一個簡寫屬性，可以同時設置 flex-grow , flex-shrink 與 flex-basis

資料來源MDN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;

Using CSS Flexible Boxes

CSS3 彈性盒子，又稱 flexbox ，是為了適應不同螢幕尺寸和顯示設備而生的佈局模式。針對許多應用而言，不用 floats 的彈性盒子模型會比塊狀模型（block model）易用，彈性容器的邊緣也不會與內容的邊緣重疊。

多數設計師會發現 flexbox 用起來比 box 簡單得多。像是不多注意 div 的話，它就會經常違反設計師意願地，跑到頁頂去──令 footer 附著在頁底，也因此變得很棘手。flexbox 的寬高能改變以適應顯示空間，將較低的元件固定住。Flexbox 邏輯也能讓你確實令 div 壓在頁面的右方或底部。Flexbox 元素的顯示順序，與原始碼的顯示順序相互獨立。

一些時髦的佈局，也能因而透過更簡潔的程式碼完成。這種有意的獨立性只影響視覺渲染，基於 HTML 原始碼的語意順序及瀏覽不會受到影響。

彈性盒子的概念Edit

Flex 排版的大致定義，是能更改該項目的長與（或）高，以便貼合任何顯示設備的空間。Flex container 能針對該元件擴張以便填補可用的空間、或收縮以便阻止空間溢出。

塊狀佈局（Block layout）以垂直方向為準、行內佈局（Inline layout）以水平方向為準、而彈性佈局（Flexbox layout）則同時允許這兩種。塊狀佈局雖適於頁面顯示，但在程式元件（application component）需要在用戶代理（user agent）變更、手機從垂直方向翻轉到水平方向……等變更定位、大小、拉伸、收縮的情形下，這種佈局就很難用了。彈性盒子佈局長於小規模佈局、而剛剛流行的格線佈局（Grid layout）則長於大規模佈局。二者皆為 CSS 工作小組為在不同用戶代理、書寫模式、和其他要求下的 Web 應用程式，提供良好互通性的一部分。

彈性盒子的字彙

在彈性盒子的世界，我們不會稱水平（inline）或垂直（block），而是主軸（main axis）與切軸（cross axis）。如果 flex-direction 是 column，主軸就會充當垂直、而切軸則充當水平。請參考下面的圖，它展示了一個彈性容器，裡面的 row 有 flex-direction，意味著該彈性項目會基於主軸，作水平排列。
flexible_box

資料來源MDN

flex-direction

CSS flex-direction 屬性指定了內部元素是如何在flex容器中佈局的，定義了主軸的方向(正方向或反方向)。

資料來源MDN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

::before (:before)

::before 會為當前元素創建一個子元素作為偽元素。常通過 content 屬性來為一個元素添加修飾性的內容。此元素默認為行內元素。

資料來源MDN
1
2
3
4
5
6
7
8
/* CSS3語法*/
element::before { 樣式 }

/* （單冒號）CSS2過時語法(僅用來支持IE8) */
element:before { 樣式 }

/*在每一個p元素前插入內容*/
p ::before { content: "Hello world!"; }

::after (:after)

CSS 偽元素 ::after 用來創建一個偽元素，做為已選中元素的最後一個子元素。通常會配合 content 屬性來為該元素添加裝飾內容。這個虛擬元素默認是行內元素。

資料來源MDN
1
2
3
element:after  { style properties }  /* CSS2 syntax */

element::after { style properties }  /* CSS3 syntax */

justify-content

CSS justify-content 屬性定義了瀏覽器如何分配順著父容器主軸的彈性元素之間及其周圍的空間

資料來源MDN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* Positional alignment */
justify-content: center;     /*居中排列*/
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /*從行首起始位置開始排列*/
justify-content: flex-end;   /*從行尾位置開始排列*/
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content : last baseline;

/* Distributed alignment */
/*均勻排列每個元素首個元素放置於起點，末尾元素放置於終點*/
justify-content: space-between;
/*均勻排列每個元素每個元素周圍分配相同的空間*/
justify-content: space-around;
/*均勻排列每個元素每個元素之間的間隔相等*/
justify-content: space-evenly;
/* Distribute items evenly Stretch 'auto'-sized items to fit容器 */
justify-content: stretch;

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content：inherit;
justify-content：initial;
justify-content：unset;

translateY()

translateY() 函數表示在頁面垂直移動元素.這個 transformation 具有特徵的就是通過 <length> 定義了元素垂直移動了多少
translateY(ty) 是 translate(0, ty) 的一種簡寫方式

資料來源MDN
1
2
3
4
.transformed {
  transform: translateY(10px);
  background-color: blue;
}

參考資料

歡迎關注我的其它發布渠道