# [CSS] flex 學習筆記

###### tags: `CSS`

## 學 flex 注意的重點
1. 控制的對象
2. 參考的空間
3. 軸

## row
row 的預設方向是**語言書寫方向！！！**
所以若語言書寫方向是直排，row 的方向會從上到下
由右至左的語言：阿拉伯語、新疆文、希伯來語等

## CodePen 練習
* [flexbox](https://codepen.io/yuna9068/pen/gdENKG "flexbox")
flex-direction、justify-content、align-items、align-content 、flex-wrap
* [flexbox 排版入門](https://codepen.io/yuna9068/pen/WgPGLG "flexbox 排版入門")
flex、flex-direction、order
* [align-self](https://codepen.io/yuna9068/pen/vYKrvxa "align-self")
align-self
* [flex-grow, flex-shrink, flex-basis](https://codepen.io/yuna9068/pen/wvWXOVQ "flex-grow, flex-shrink, flex-basis")
flex-grow, flex-shrink, flex-basis

## 學習 flex 的小遊戲
* [FLEXBOX FROGGY](https://flexboxfroggy.com/ "Flexbox Froggy - A game for learning CSS flexbox")
可學到的屬性：
* justify-content
* align-items
* flex-direction
* order
* align-self
* flex-wrap
* flex-flow: flex-direction flex-wrap
* align-content

* [Flex Pirate](https://hexschool.github.io/flexbox-pirate/index.html "Flex Pirate - 擊倒海盜，獲得網頁排版寶藏")
可學到的屬性：
* justify-content
* align-items
* flex-wrap
* align-content
* flex-direction

---

:::info
建立日期：2020-11-04
更新日期：2023-03-28
:::