雅藝視覺設計 Yaii Visual │ 台中網頁設計、手繪風設計、平面設計、網頁設計


前端PO的CSS學習小筆記—Flexbox (1)

YAii雅藝網頁設計 YAii
Share

前端PO的CSS學習小筆記—Flexbox (1)

嘿囉~Every Body

今天是前端PO(在下我本人)的開版第一篇,有點緊張有點害羞

之後都會在這邊跟大家分享自己在實務(食物)跟學習上的一些經驗和學習筆記,還望各位捧油一起努力,有錯誤的地方請大家不吝賜教,當然有任何建議或疑問都可以互相交流哦~~歡迎留言!!

哦…我忘記沒有留言功能…哇哈哈哈哈~~~

 

好~輕鬆的自我介紹開場白結束,咱們來進入正題吧~

 

今天要介紹的是CSS3的語法-Flexbox

這次的Flexbox學習筆記會分成上下兩篇:

一、Flexbox 簡介與基本結構

二、Flexbox 屬性介紹

 

Flexbox 簡介:

Flexbox是一種CSS的排版語法,特性就像一個有彈性可以靈活伸縮的盒子,自從RWD設計開始崛起後,Flexbox就很常被提到,但Flexbox不是這一兩年才出現的CSS語法唷~

Flexbox最早是在2012年就出現了,是到這一年左右整體架構跟規則才比較完善,連大家都不陌生的Bootstrap在第四版也加入了Flexbox的語法來製作RWD的排版。

現在網路上也開始有些Flexbox Layout的教學文章,各位捧油可以一邊參考一邊實作看看。

 

不免俗的要來看一下各個瀏覽器的支援程度

目前的主流瀏覽器幾乎都有支援囉~

而大家的噩夢 – IE,目前IE11算是支援比較多的,但有少部分的Flexbox屬性

IE11沒有支援,詳細的說明,大家可以到Can I Use上去查詢

Can I Use:https://caniuse.com/

 

Flexbox 基本結構:

Flexbox是個特別的CSS語法,它有它自己專屬的基本規則跟架構,在製作Flexbox Layout時,須按照Flexbox的規則來排版,比較不會跑版或出槌哦~

首先介紹基本結構前,先來張示意圖

Flex Container:flex容器 (父元素)

Flex Item :flex子項目 (子元素)

設定Div(父元素)的display為flex 或 inline-flex,這個Div就會化身為Flex Container

只要是包在這個Div(父元素)裡面的子元素們,就是Flex item

 

為什麼要先搞懂這樣的一個規則呢?

你會發現Flexbox的屬性裡,有分成給Flex Container使用的屬性跟Flex Item使用的屬性

所以這個基本觀念一定要先建立起來,不然在實作上你會發現怎麼會突然跑版或是沒有作用,只要先建立好這個環境,接下來就可以在Flex Container裡面使用Flex item做RWD排版或是其他你希望呈現的效果囉~

 

Flexbox的上篇就先介紹到這裡囉~大家先消化一下

前端PO的CSS學習小筆記下台一鞠躬,咱們下篇在相見~~ (階梯式手動下降 + 揮手)