---
# System prepended metadata

title: '[CSS] flex 學習筆記'
tags: [CSS]

---

# [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
:::