日本語
各位好，我是 Sho Tachibana，我在 LINE 擔任 Technical Evangelist，負責協助各位開發者成功使用 LINE 的 API 並創造商機。
Flex Message Update 1 已公開且變得更加好用，容我為各位介紹其新功能。
何謂 Flex Message?
Flex Message 是一種對話介面，可使用 CSS Flexible Box (CSS Flexbox) 的基礎知識，自由客製化版面。
支援的用戶端版本
支援所有版本，但唯有使用 text 元素的 maxLines 時，iOS 版的 LINE 與 Android 版的 LINE 皆須為 9.8.0 以後版本，PC 版則必須為 5.17 以後版本。
新功能
對話框大小
原本 bubble 元素的寬度無法改變，但現在已能藉由指定 size 屬性的方式，改變其寬度。可指定的選項為 giga、mega、kilo、micro、nano。
另外，橫向捲軸內的對話框寬度，將套用：
- 最大尺寸
- 畫面寬度的 80%
兩者中較小的一方 (不會超過畫面尺寸的 80% 以上)。
令人驚喜的改變！
- 可使用 Flex Message，建立與範本訊息相同大小的元素。
- 不再需要產生調整對話框尺寸用的動態圖片。
- 能增加單一畫面中可顯示的對話框數量。
Box 的內部留白
原本套用於 box 元素內之元素中的內部留白無法改變，但現在可藉由指定 paddingAll 等屬性的方式進行改變。其數值能以下列格式指定:
| 單位 | 數值 | 備註 |
| % | 大於 0 且在 json 格式上有效的數值 | 以母元素的尺寸作為 100，進行計算 |
| 像素 | 大於 0 且在 json 格式上有效的數值 | |
| 關鍵字 | none, xs, sm, md, lg, xl, xxl |
此外，未設定內部留白時，將套用母元素設定的數值。
令人驚喜的改變！
- 能以不留白、且填滿整個對話框的方式配置圖片。
- 版面的自由度增加。
Box 的風格
新增了 box 元素可設定的風格。
| 屬性 | 數值 | 預設值 |
backgroundColor | 以 16 進位色碼指定 (#RRGGBB、#RRGGBBAA 等) | transparent |
borderColor | 以 16 進位色碼指定 (#RRGGBB、#RRGGBBAA 等) | |
borderWidth | 任一數值 | none |
cornerRadius | 任一數值 | none |
width | 任一數值 | |
height | 任一數值 |
此外，指定 cornerRadius 時，子元素亦會同時以鏤空方式顯示。另外，還可設定動作。
令人驚喜的改變！
- 修飾的自由度增加。
- 可設定點選
box元素時的動作。
位置 (Position) 與偏移 (Offset)
box 可使用 box 元素的 position、offsetTop 等屬性，製作出 CSS 之 absolute 般的版面。
offset 值能以下列格式指定。
| 單位 | 數值 | 備註 |
| % | json 格式上有效的數值 (負整數亦可) | 以母元素的尺寸作為 100，進行計算 |
| 像素 | json 格式上有效的數值 (負整數亦可) | |
| 關鍵字 | none, xs, sm, md, lg, xl, xxl |
令人驚喜的改變！
- 可藉由搭配內部留白與風格的方式，使用 Flex Message，開發圖片橫向捲軸範本。
對話框的動作
bubble 元素中，新增 action 屬性，可針對整個 bubble 元素，定義行動。
子元素亦已定義動作時，將以子元素為優先。
令人驚喜的改變！
- UX 獲得改良
針對 Hero 元素，配置 Box 元素
原本針對 hero 元素，只能配置 image 元素，但現在可配置 box 元素。
文字造型
文字除了新增可套用的風格外，還可針對較長文字中的部分文字套用風格。
| 屬性 | 數值 |
style | normal 或 italic |
decoration | none 或 underline 或 line-through |
contents | 以陣列指定 |
style 與 decoration 由於與 CSS 相同，因此將其去除。
contents 的屬性，用於僅針對文字的一部份，套用風格，因此必須以陣列的型態，將 span 元素新增於 text 元素下方使用。如此一來，不只能讓修飾效果套用至使用 text 元素的整體文字，還能變更局部的造型。
原本的 text 元素
使用 contents 屬性後的修飾文字
令人驚喜的改變！
- 修飾的自由度增加。
填充元素的 flex 屬性
filler 元素中，新增 flex 屬性，增加了自由度。
令人驚喜的改變！
- 版面的自由度增加。
Simulator
亦可使用支援 Flex Message Update 1 的 Flex Message Simulator Update 1 (β 版)。另外，Showcase 應該也可作為參考。
但由於為 β 版，因此可能會出現無法正確執行的情況，敬請多加注意。
總結
若要使用 Messaging API，安裝對使用者來說非常好用的服務時，Flex Message 可說是幾乎必備的功能。經過這次更新後，更能建構出版面更加俐落的對話介面，請務必試用看看。