FlexBox

說明: 將會搭配 Chakra UI 慣用的寫法來搭配程式碼範例

flex-direction

• flexDirection is direction

預設為 row

css

.flex-container {

flex-direction: row;

}

//chakra 範例

<Flex direction="row"></Flex>

<Flex direction="rowReverse"></Flex>

<Flex direction="column"></Flex>

<Flex direction="columnReverse"></Flex>

//chakra 範例

<div class="flex-row"></div>

<div direction="flex-row-reverse"></div>

<div direction="flex-col"></div>

<div direction="flex-col-reverse"></div>

flex-wrap

css

.flex-container {

flex-wrap: wrap;

}

//chakra 範例

<Flex wrap="noWrap"></Flex>

<Flex wrap="wrap"></Flex>

<Flex wrap="wrapReverse"></Flex>

flex-flow

ps: chakra is not support this css style in props

flex-direction 和 flex-wrap 這兩個屬性可以合併成 flex-flow 屬性。flex-flow 接受兩個值，第一個是給 flex-direction 第二個是給 flex-wrap

css

.flex-container {

flex-flow: row wrap;

}

justify-content

• justifyContent is justify

主軸的對齊方式

css

.flex-container {

flex-wrap: center; //置中

}

//chakra 範例

<Flex justify="flexStart"></Flex>

<Flex justify="flexEnd"></Flex>

<Flex justify="center"></Flex>

<Flex justify="spaceAround"></Flex>

<Flex justify="spaceEvenly"></Flex>

align-items

• alignItems is align

交叉軸 (cross axis) 的對齊方式

css

.flex-container {

align-items: center; //垂直置中

align-items: stretch; //讓item分配一樣的空間大家

}

//chakra 範例

<Flex align="flexStart"></Flex>

<Flex align="flexEnd"></Flex>

<Flex align="wrapReverse"></Flex>

<Flex align="center"></Flex>

<Flex align="stretch"></Flex>