Skip to content

FlexContainer 彈性容器

FlexContainer 組件可以將包覆的區塊進行彈性布局,讓使用者可以更方便地進行排版。可透過 props 設定子元素的排列方式、對齊方式等屬性,並支援響應式設計。

基本用法

區塊一
區塊二
區塊三

垂直排列(col 屬性)

垂直一
垂直二
垂直三

API

屬性

屬性名稱說明類型默認值
align垂直對齊方式'start'|'center'|'end'|'between'|'around'|'evenly'
justify水平排列方式'start'|'center'|'end'|'between'|'around'|'evenly'
gap元素間距number0
col是否垂直排列booleanfalse
wrap是否換行booleanfalse

插槽 Slots

插槽名稱說明
default容器內容

Released under the MIT License.