SlideShare a Scribd company logo
CSS 版面配置 (續)
flexbox
很久很久以前....
http://www.slideshare.net/ssuser2592bd/css-layout-53263637
談談CSS排版趨勢
帳號 密碼
取消 登入
table
帳號
密碼
登入
DIV+CSS
flexbox
grid Layout
susy
………
這些也太難記了吧....
• 水平置中
• margin:0 auto;
• text-align:center;
• 垂直置中
• line-height ....
• vertical-align ...
圖片來源:https://www.facebook.com/165330740249615/photos/pb.165330740249615.2207520000.1457264518./896941963755152/?type=3&theater
大綱
• 什麼是flexbox? 支援度?
• 用法
• 與過去比較?
• 總結
flexbox是什麼?
• 一種排版(布局)方式
• 較有彈性的排版
• 解決過去複雜的版面配置問題
PS. Modernizr 偵測是否支援
用法
• flex container
• display:flex;
• display:inline-flex;
flex-direction
• flex-direction:row;
• flex-direction:row-reverse;
• flex-direction:column;
• flex-direction:column-reverse;
1 2 3
3 2 1
1
2
3
3
2
1
https://jsfiddl.net/camel2243/33Lbj879/
justify-content
• flex-start
• flex-end
• center
• space-between
• space-around
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
https://jsfiddle.net/camel2243/4eyr3m2y/1/
align-items
1 2 3
1 2 3
1 2 3
flex-start
https://jsfiddle.net/camel2243/4tmd88n3/2/
flex-end center stretch
1 2 3
align-content
1 2 3
1 2 3
1 2 3
1 2 3
4 5 6
4 5 6
4 5 6
4 5 6
flex-start center space-between space-around
https://jsfiddle.net/camel2243/pe1xa2oz/1/
flex-wrap ( wrap | nowrap | wrap-reverse)
比較
• 常見的選單、導覽列
https://jsfiddle.net/camel2243/s9xaL8gd/1/
熱門首頁 生活 熱門首頁
DIV + CSS
display: inline-block;
width: 33%;
width: 50%;
display: flex;
flex-grow: 1;
align-items: flex-start;
flexbox
比較
• 三欄式頁面
我
有
三行
我有
兩行
我一行 我
有
三行
我有
兩行
我一行
overflow:hidden;
DIV + CSS
padding-bottom: 99999px;
margin-bottom: -99999px;
display: flex; flex-grow: 1;
flexbox
https://jsfiddle.net/camel2243/p5j6kLua/2/
比較
• 雙邊側欄
固
定
寬
雙
側
欄
主 內 容
隨 螢 幕
大 小 改 變
https://jsfiddle.net/camel2243/w7ofqkmh/3/
display: flex;
flex-grow: 1;
flexbox
如果是DIV + CSS 呢?
你會怎麼寫!?
總結
• 垂直置中不再困難
• 減少浮動( float ) 與 clearfix
• 減少 CSS hack (暗黑寫法)
• 簡潔的寫法與架構,容易維護及修改
圖片來源:https://www.facebook.com/165330740249615/photos/pb.165330740249615.2207520000.1457264518./896941963755152/?type=3&theater
參考資料
• http://zh-tw.learnlayout.com/flexbox.html (保哥 CSS 版面配置翻譯)
• https://lincolnloop.com/blog/introducing-flexbox-fridays/ (flexbox)
• http://andyyou.github.io/javascript/2015/09/09/understand-
flexbox.html (flexbox)
• http://flexboxfroggy.com/ (HTML5 flexbox 小遊戲)
Q & A

More Related Content

What's hot

自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
洧杰 廖
 
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
 
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
百範 陳
 
SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
Zhu Qi
 
Style基础优化之独角兽篇
Style基础优化之独角兽篇Style基础优化之独角兽篇
Style基础优化之独角兽篇fangdeng
 
從前端設計的角度來看 Angular - TW2018 amos
從前端設計的角度來看 Angular - TW2018 amos從前端設計的角度來看 Angular - TW2018 amos
從前端設計的角度來看 Angular - TW2018 amos
Amos Lee
 

What's hot (7)

自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
 
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
 
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
 
SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
 
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
 
Style基础优化之独角兽篇
Style基础优化之独角兽篇Style基础优化之独角兽篇
Style基础优化之独角兽篇
 
從前端設計的角度來看 Angular - TW2018 amos
從前端設計的角度來看 Angular - TW2018 amos從前端設計的角度來看 Angular - TW2018 amos
從前端設計的角度來看 Angular - TW2018 amos
 

Viewers also liked

151107 物聯網教學應用發表會-開場
151107   物聯網教學應用發表會-開場151107   物聯網教學應用發表會-開場
151107 物聯網教學應用發表會-開場
CAVEDU Education
 
Opensource 是人生的好朋友 2016-07-21
Opensource 是人生的好朋友 2016-07-21Opensource 是人生的好朋友 2016-07-21
Opensource 是人生的好朋友 2016-07-21
CQD
 
APP Development Learning Experience Share - AppCoda
APP Development Learning Experience Share - AppCodaAPP Development Learning Experience Share - AppCoda
APP Development Learning Experience Share - AppCoda
Ryan Chung
 
PHP WEB 应用组织与结构
PHP WEB 应用组织与结构PHP WEB 应用组织与结构
PHP WEB 应用组织与结构
HonestQiao
 
TrainingProgramAtMobileDevTW
TrainingProgramAtMobileDevTWTrainingProgramAtMobileDevTW
TrainingProgramAtMobileDevTW
Ryan Chung
 
從 Php unit 到 ci 持續整合
從 Php unit 到 ci 持續整合從 Php unit 到 ci 持續整合
從 Php unit 到 ci 持續整合
Joel Zhong
 
教學課程Pdf備份
教學課程Pdf備份教學課程Pdf備份
教學課程Pdf備份
楷霖 顏
 
Grpc go-in-php
Grpc go-in-phpGrpc go-in-php
Grpc go-in-php
光照 刘
 
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
Chieh (Jack) Yu
 
UI guide Example
UI guide ExampleUI guide Example
UI guide Example
Howlin Yang
 
React踩雷大作戰
React踩雷大作戰React踩雷大作戰
React踩雷大作戰
皮馬 頑
 
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來
Ling-Jyh Chen
 
Stock analysis
Stock analysisStock analysis
Stock analysis
Hal Chan
 
PHP教材
PHP教材PHP教材
PHP教材
TaiShunHuang
 
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊PHP Conf Taiwan 2016 自動化與持續整合實作工作坊
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊
Chen Cheng-Wei
 
Bootstrap, Angel or Venture: Determining the Right Financing Strategy for You...
Bootstrap, Angel or Venture: Determining the Right Financing Strategy for You...Bootstrap, Angel or Venture: Determining the Right Financing Strategy for You...
Bootstrap, Angel or Venture: Determining the Right Financing Strategy for You...
Judy Loehr
 
PHP記帳網頁教材(第一頁是空白的)
PHP記帳網頁教材(第一頁是空白的)PHP記帳網頁教材(第一頁是空白的)
PHP記帳網頁教材(第一頁是空白的)
TaiShunHuang
 
響應式網頁實作坊
響應式網頁實作坊響應式網頁實作坊
響應式網頁實作坊
Chih-cheng Wang
 
前端爆肝之旅+React上山前的小專案心得分享
前端爆肝之旅+React上山前的小專案心得分享前端爆肝之旅+React上山前的小專案心得分享
前端爆肝之旅+React上山前的小專案心得分享
Yao Nien Chung
 
PhpSpec TDD 紅燈-綠燈-重構流程-PHP也有day#25_by_閃亮亮
PhpSpec TDD 紅燈-綠燈-重構流程-PHP也有day#25_by_閃亮亮PhpSpec TDD 紅燈-綠燈-重構流程-PHP也有day#25_by_閃亮亮
PhpSpec TDD 紅燈-綠燈-重構流程-PHP也有day#25_by_閃亮亮
亮亮 閃
 

Viewers also liked (20)

151107 物聯網教學應用發表會-開場
151107   物聯網教學應用發表會-開場151107   物聯網教學應用發表會-開場
151107 物聯網教學應用發表會-開場
 
Opensource 是人生的好朋友 2016-07-21
Opensource 是人生的好朋友 2016-07-21Opensource 是人生的好朋友 2016-07-21
Opensource 是人生的好朋友 2016-07-21
 
APP Development Learning Experience Share - AppCoda
APP Development Learning Experience Share - AppCodaAPP Development Learning Experience Share - AppCoda
APP Development Learning Experience Share - AppCoda
 
PHP WEB 应用组织与结构
PHP WEB 应用组织与结构PHP WEB 应用组织与结构
PHP WEB 应用组织与结构
 
TrainingProgramAtMobileDevTW
TrainingProgramAtMobileDevTWTrainingProgramAtMobileDevTW
TrainingProgramAtMobileDevTW
 
從 Php unit 到 ci 持續整合
從 Php unit 到 ci 持續整合從 Php unit 到 ci 持續整合
從 Php unit 到 ci 持續整合
 
教學課程Pdf備份
教學課程Pdf備份教學課程Pdf備份
教學課程Pdf備份
 
Grpc go-in-php
Grpc go-in-phpGrpc go-in-php
Grpc go-in-php
 
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
 
UI guide Example
UI guide ExampleUI guide Example
UI guide Example
 
React踩雷大作戰
React踩雷大作戰React踩雷大作戰
React踩雷大作戰
 
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來
從 LASS 到空氣盒子 - 談網路公民科學的實踐與未來
 
Stock analysis
Stock analysisStock analysis
Stock analysis
 
PHP教材
PHP教材PHP教材
PHP教材
 
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊PHP Conf Taiwan 2016 自動化與持續整合實作工作坊
PHP Conf Taiwan 2016 自動化與持續整合實作工作坊
 
Bootstrap, Angel or Venture: Determining the Right Financing Strategy for You...
Bootstrap, Angel or Venture: Determining the Right Financing Strategy for You...Bootstrap, Angel or Venture: Determining the Right Financing Strategy for You...
Bootstrap, Angel or Venture: Determining the Right Financing Strategy for You...
 
PHP記帳網頁教材(第一頁是空白的)
PHP記帳網頁教材(第一頁是空白的)PHP記帳網頁教材(第一頁是空白的)
PHP記帳網頁教材(第一頁是空白的)
 
響應式網頁實作坊
響應式網頁實作坊響應式網頁實作坊
響應式網頁實作坊
 
前端爆肝之旅+React上山前的小專案心得分享
前端爆肝之旅+React上山前的小專案心得分享前端爆肝之旅+React上山前的小專案心得分享
前端爆肝之旅+React上山前的小專案心得分享
 
PhpSpec TDD 紅燈-綠燈-重構流程-PHP也有day#25_by_閃亮亮
PhpSpec TDD 紅燈-綠燈-重構流程-PHP也有day#25_by_閃亮亮PhpSpec TDD 紅燈-綠燈-重構流程-PHP也有day#25_by_閃亮亮
PhpSpec TDD 紅燈-綠燈-重構流程-PHP也有day#25_by_閃亮亮
 

Similar to Flexbox版面配置

2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇传贵 谢
 
Fitness Club 範例網站建置
Fitness Club 範例網站建置Fitness Club 範例網站建置
Fitness Club 範例網站建置
Molly Lin
 
Css布局
Css布局Css布局
Css布局
pi cheng
 
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
 
3sss book
3sss book3sss book
3sss book
Hina Chen
 
Alice库构建
Alice库构建Alice库构建
Alice库构建
Sofish Lin
 
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考greengnn
 
Css schema by_sofish
Css schema by_sofishCss schema by_sofish
Css schema by_sofishWebrebuild
 
支付宝CSS构架
支付宝CSS构架支付宝CSS构架
支付宝CSS构架Sofish Lin
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染Ailsa126
 
Introduction to CSS Framwork
Introduction to CSS FramworkIntroduction to CSS Framwork
Introduction to CSS Framwork
TechParty@UIC
 
網頁三本柱之Html與css
網頁三本柱之Html與css網頁三本柱之Html與css
網頁三本柱之Html與css
Aaron King
 
CSS 語法教學
CSS 語法教學CSS 語法教學
CSS 語法教學
Shengyou Fan
 

Similar to Flexbox版面配置 (16)

2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇
 
Fitness Club 範例網站建置
Fitness Club 範例網站建置Fitness Club 範例網站建置
Fitness Club 範例網站建置
 
Css布局
Css布局Css布局
Css布局
 
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
 
3sss book
3sss book3sss book
3sss book
 
Alice库构建
Alice库构建Alice库构建
Alice库构建
 
Alice v3
Alice v3Alice v3
Alice v3
 
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
 
Css schema by_sofish
Css schema by_sofishCss schema by_sofish
Css schema by_sofish
 
支付宝CSS构架
支付宝CSS构架支付宝CSS构架
支付宝CSS构架
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
Introduction to CSS Framwork
Introduction to CSS FramworkIntroduction to CSS Framwork
Introduction to CSS Framwork
 
6. CSS
6. CSS6. CSS
6. CSS
 
網頁三本柱之Html與css
網頁三本柱之Html與css網頁三本柱之Html與css
網頁三本柱之Html與css
 
CSS 語法教學
CSS 語法教學CSS 語法教學
CSS 語法教學
 

Recently uploaded

20220325-如何下載與引用資料-柯智仁.pdf_20220325-如何下載與引用資料-柯智仁.pdf
20220325-如何下載與引用資料-柯智仁.pdf_20220325-如何下載與引用資料-柯智仁.pdf20220325-如何下載與引用資料-柯智仁.pdf_20220325-如何下載與引用資料-柯智仁.pdf
20220325-如何下載與引用資料-柯智仁.pdf_20220325-如何下載與引用資料-柯智仁.pdf
jhujyunjhang
 
20230913 資料發布類型-陳建文.pdf_20230913 資料發布類型-陳建文.pdf
20230913 資料發布類型-陳建文.pdf_20230913 資料發布類型-陳建文.pdf20230913 資料發布類型-陳建文.pdf_20230913 資料發布類型-陳建文.pdf
20230913 資料發布類型-陳建文.pdf_20230913 資料發布類型-陳建文.pdf
jhujyunjhang
 
🔥黑客改成绩,你想知道的都在这里! 🌟[爆炸头] 大胆尝试新方法?试试这个吧~ 💡 提高效率,不再拖延。一键优化,成绩瞬间飙升! #学习动力源泉 #神奇改...
🔥黑客改成绩,你想知道的都在这里! 🌟[爆炸头] 大胆尝试新方法?试试这个吧~ 💡 提高效率,不再拖延。一键优化,成绩瞬间飙升! #学习动力源泉 #神奇改...🔥黑客改成绩,你想知道的都在这里! 🌟[爆炸头] 大胆尝试新方法?试试这个吧~ 💡 提高效率,不再拖延。一键优化,成绩瞬间飙升! #学习动力源泉 #神奇改...
🔥黑客改成绩,你想知道的都在这里! 🌟[爆炸头] 大胆尝试新方法?试试这个吧~ 💡 提高效率,不再拖延。一键优化,成绩瞬间飙升! #学习动力源泉 #神奇改...
微信 tytyqqww业务接单
 
GPA低,申硕困难。想问一下是否能修改成绩单?希望得到您的帮助申请美国大学改成绩单可以吗?如何增加申请成功几率【微信:oojjiijj】
GPA低,申硕困难。想问一下是否能修改成绩单?希望得到您的帮助申请美国大学改成绩单可以吗?如何增加申请成功几率【微信:oojjiijj】GPA低,申硕困难。想问一下是否能修改成绩单?希望得到您的帮助申请美国大学改成绩单可以吗?如何增加申请成功几率【微信:oojjiijj】
GPA低,申硕困难。想问一下是否能修改成绩单?希望得到您的帮助申请美国大学改成绩单可以吗?如何增加申请成功几率【微信:oojjiijj】
微信 tytyqqww业务接单
 
113學年度國中教育會考寫作測驗六級分樣卷、113學年度國中教育會考寫作測驗六級分樣卷
113學年度國中教育會考寫作測驗六級分樣卷、113學年度國中教育會考寫作測驗六級分樣卷113學年度國中教育會考寫作測驗六級分樣卷、113學年度國中教育會考寫作測驗六級分樣卷
113學年度國中教育會考寫作測驗六級分樣卷、113學年度國中教育會考寫作測驗六級分樣卷
ssuserd66db11
 
20230913-開放資料流程-柯智仁.pdf_20230913-開放資料流程-柯智仁.pdf
20230913-開放資料流程-柯智仁.pdf_20230913-開放資料流程-柯智仁.pdf20230913-開放資料流程-柯智仁.pdf_20230913-開放資料流程-柯智仁.pdf
20230913-開放資料流程-柯智仁.pdf_20230913-開放資料流程-柯智仁.pdf
jhujyunjhang
 
根据课文训练学生习写《可以喝的书》,丙组作文也是一篇供料作文,满分为十分.pptx
根据课文训练学生习写《可以喝的书》,丙组作文也是一篇供料作文,满分为十分.pptx根据课文训练学生习写《可以喝的书》,丙组作文也是一篇供料作文,满分为十分.pptx
根据课文训练学生习写《可以喝的书》,丙组作文也是一篇供料作文,满分为十分.pptx
OOJIANHANGMoe
 
澳大利亚大学成绩单修改 GPA修改 G5研究生保录英国大学成绩修单改 GPA修改 G5研究生保录实时手机定位app有哪些?【微信:oojjiijj】
澳大利亚大学成绩单修改 GPA修改 G5研究生保录英国大学成绩修单改 GPA修改 G5研究生保录实时手机定位app有哪些?【微信:oojjiijj】澳大利亚大学成绩单修改 GPA修改 G5研究生保录英国大学成绩修单改 GPA修改 G5研究生保录实时手机定位app有哪些?【微信:oojjiijj】
澳大利亚大学成绩单修改 GPA修改 G5研究生保录英国大学成绩修单改 GPA修改 G5研究生保录实时手机定位app有哪些?【微信:oojjiijj】
微信 tytyqqww业务接单
 
Unit 3 Self-Introduction New words 2.pptx
Unit 3 Self-Introduction New words 2.pptxUnit 3 Self-Introduction New words 2.pptx
Unit 3 Self-Introduction New words 2.pptx
priscilleng1
 
20230913-資料標準-劉璟儀.pdf_20230913-資料標準-劉璟儀.pdf
20230913-資料標準-劉璟儀.pdf_20230913-資料標準-劉璟儀.pdf20230913-資料標準-劉璟儀.pdf_20230913-資料標準-劉璟儀.pdf
20230913-資料標準-劉璟儀.pdf_20230913-資料標準-劉璟儀.pdf
jhujyunjhang
 
20240522-如何下載與引用TBIA資料-張俊怡.pdf_20240522-如何下載與引用TBIA資料-張俊怡.pdf
20240522-如何下載與引用TBIA資料-張俊怡.pdf_20240522-如何下載與引用TBIA資料-張俊怡.pdf20240522-如何下載與引用TBIA資料-張俊怡.pdf_20240522-如何下載與引用TBIA資料-張俊怡.pdf
20240522-如何下載與引用TBIA資料-張俊怡.pdf_20240522-如何下載與引用TBIA資料-張俊怡.pdf
jhujyunjhang
 
20220317-開放授權規範-林誠夏.pdf_20220317-開放授權規範-林誠夏.pdf
20220317-開放授權規範-林誠夏.pdf_20220317-開放授權規範-林誠夏.pdf20220317-開放授權規範-林誠夏.pdf_20220317-開放授權規範-林誠夏.pdf
20220317-開放授權規範-林誠夏.pdf_20220317-開放授權規範-林誠夏.pdf
jhujyunjhang
 
Lesson 3 Self-Introduction New words 1 .pptx
Lesson 3 Self-Introduction New words 1 .pptxLesson 3 Self-Introduction New words 1 .pptx
Lesson 3 Self-Introduction New words 1 .pptx
priscilleng1
 
流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義
流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義
流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義
LinPhil
 
20240521-開放資料的前置準備與清理-楊富鈞.pdf_20240521-開放資料的前置準備與清理-楊富鈞.pdf
20240521-開放資料的前置準備與清理-楊富鈞.pdf_20240521-開放資料的前置準備與清理-楊富鈞.pdf20240521-開放資料的前置準備與清理-楊富鈞.pdf_20240521-開放資料的前置準備與清理-楊富鈞.pdf
20240521-開放資料的前置準備與清理-楊富鈞.pdf_20240521-開放資料的前置準備與清理-楊富鈞.pdf
jhujyunjhang
 
APII - interview notes 2024 for ogcio latest version
APII - interview notes 2024 for ogcio latest versionAPII - interview notes 2024 for ogcio latest version
APII - interview notes 2024 for ogcio latest version
digimen08
 
Unit 3 Self-Introduction New words 3.pptx
Unit 3 Self-Introduction New words 3.pptxUnit 3 Self-Introduction New words 3.pptx
Unit 3 Self-Introduction New words 3.pptx
priscilleng1
 
20230513-datapaper-何芷蔚.pdf_20230513-datapaper-何芷蔚.pdf
20230513-datapaper-何芷蔚.pdf_20230513-datapaper-何芷蔚.pdf20230513-datapaper-何芷蔚.pdf_20230513-datapaper-何芷蔚.pdf
20230513-datapaper-何芷蔚.pdf_20230513-datapaper-何芷蔚.pdf
jhujyunjhang
 
20240520-敏感資料處理原則-柯智仁.pptx.pdf_20240520-敏感資料處理原則-柯智仁.pptx.pdf
20240520-敏感資料處理原則-柯智仁.pptx.pdf_20240520-敏感資料處理原則-柯智仁.pptx.pdf20240520-敏感資料處理原則-柯智仁.pptx.pdf_20240520-敏感資料處理原則-柯智仁.pptx.pdf
20240520-敏感資料處理原則-柯智仁.pptx.pdf_20240520-敏感資料處理原則-柯智仁.pptx.pdf
jhujyunjhang
 
20240520-TaiBIF和GBIF介紹-劉璟儀.pdf_20240520-TaiBIF和GBIF介紹-劉璟儀.pdf
20240520-TaiBIF和GBIF介紹-劉璟儀.pdf_20240520-TaiBIF和GBIF介紹-劉璟儀.pdf20240520-TaiBIF和GBIF介紹-劉璟儀.pdf_20240520-TaiBIF和GBIF介紹-劉璟儀.pdf
20240520-TaiBIF和GBIF介紹-劉璟儀.pdf_20240520-TaiBIF和GBIF介紹-劉璟儀.pdf
jhujyunjhang
 

Recently uploaded (20)

20220325-如何下載與引用資料-柯智仁.pdf_20220325-如何下載與引用資料-柯智仁.pdf
20220325-如何下載與引用資料-柯智仁.pdf_20220325-如何下載與引用資料-柯智仁.pdf20220325-如何下載與引用資料-柯智仁.pdf_20220325-如何下載與引用資料-柯智仁.pdf
20220325-如何下載與引用資料-柯智仁.pdf_20220325-如何下載與引用資料-柯智仁.pdf
 
20230913 資料發布類型-陳建文.pdf_20230913 資料發布類型-陳建文.pdf
20230913 資料發布類型-陳建文.pdf_20230913 資料發布類型-陳建文.pdf20230913 資料發布類型-陳建文.pdf_20230913 資料發布類型-陳建文.pdf
20230913 資料發布類型-陳建文.pdf_20230913 資料發布類型-陳建文.pdf
 
🔥黑客改成绩,你想知道的都在这里! 🌟[爆炸头] 大胆尝试新方法?试试这个吧~ 💡 提高效率,不再拖延。一键优化,成绩瞬间飙升! #学习动力源泉 #神奇改...
🔥黑客改成绩,你想知道的都在这里! 🌟[爆炸头] 大胆尝试新方法?试试这个吧~ 💡 提高效率,不再拖延。一键优化,成绩瞬间飙升! #学习动力源泉 #神奇改...🔥黑客改成绩,你想知道的都在这里! 🌟[爆炸头] 大胆尝试新方法?试试这个吧~ 💡 提高效率,不再拖延。一键优化,成绩瞬间飙升! #学习动力源泉 #神奇改...
🔥黑客改成绩,你想知道的都在这里! 🌟[爆炸头] 大胆尝试新方法?试试这个吧~ 💡 提高效率,不再拖延。一键优化,成绩瞬间飙升! #学习动力源泉 #神奇改...
 
GPA低,申硕困难。想问一下是否能修改成绩单?希望得到您的帮助申请美国大学改成绩单可以吗?如何增加申请成功几率【微信:oojjiijj】
GPA低,申硕困难。想问一下是否能修改成绩单?希望得到您的帮助申请美国大学改成绩单可以吗?如何增加申请成功几率【微信:oojjiijj】GPA低,申硕困难。想问一下是否能修改成绩单?希望得到您的帮助申请美国大学改成绩单可以吗?如何增加申请成功几率【微信:oojjiijj】
GPA低,申硕困难。想问一下是否能修改成绩单?希望得到您的帮助申请美国大学改成绩单可以吗?如何增加申请成功几率【微信:oojjiijj】
 
113學年度國中教育會考寫作測驗六級分樣卷、113學年度國中教育會考寫作測驗六級分樣卷
113學年度國中教育會考寫作測驗六級分樣卷、113學年度國中教育會考寫作測驗六級分樣卷113學年度國中教育會考寫作測驗六級分樣卷、113學年度國中教育會考寫作測驗六級分樣卷
113學年度國中教育會考寫作測驗六級分樣卷、113學年度國中教育會考寫作測驗六級分樣卷
 
20230913-開放資料流程-柯智仁.pdf_20230913-開放資料流程-柯智仁.pdf
20230913-開放資料流程-柯智仁.pdf_20230913-開放資料流程-柯智仁.pdf20230913-開放資料流程-柯智仁.pdf_20230913-開放資料流程-柯智仁.pdf
20230913-開放資料流程-柯智仁.pdf_20230913-開放資料流程-柯智仁.pdf
 
根据课文训练学生习写《可以喝的书》,丙组作文也是一篇供料作文,满分为十分.pptx
根据课文训练学生习写《可以喝的书》,丙组作文也是一篇供料作文,满分为十分.pptx根据课文训练学生习写《可以喝的书》,丙组作文也是一篇供料作文,满分为十分.pptx
根据课文训练学生习写《可以喝的书》,丙组作文也是一篇供料作文,满分为十分.pptx
 
澳大利亚大学成绩单修改 GPA修改 G5研究生保录英国大学成绩修单改 GPA修改 G5研究生保录实时手机定位app有哪些?【微信:oojjiijj】
澳大利亚大学成绩单修改 GPA修改 G5研究生保录英国大学成绩修单改 GPA修改 G5研究生保录实时手机定位app有哪些?【微信:oojjiijj】澳大利亚大学成绩单修改 GPA修改 G5研究生保录英国大学成绩修单改 GPA修改 G5研究生保录实时手机定位app有哪些?【微信:oojjiijj】
澳大利亚大学成绩单修改 GPA修改 G5研究生保录英国大学成绩修单改 GPA修改 G5研究生保录实时手机定位app有哪些?【微信:oojjiijj】
 
Unit 3 Self-Introduction New words 2.pptx
Unit 3 Self-Introduction New words 2.pptxUnit 3 Self-Introduction New words 2.pptx
Unit 3 Self-Introduction New words 2.pptx
 
20230913-資料標準-劉璟儀.pdf_20230913-資料標準-劉璟儀.pdf
20230913-資料標準-劉璟儀.pdf_20230913-資料標準-劉璟儀.pdf20230913-資料標準-劉璟儀.pdf_20230913-資料標準-劉璟儀.pdf
20230913-資料標準-劉璟儀.pdf_20230913-資料標準-劉璟儀.pdf
 
20240522-如何下載與引用TBIA資料-張俊怡.pdf_20240522-如何下載與引用TBIA資料-張俊怡.pdf
20240522-如何下載與引用TBIA資料-張俊怡.pdf_20240522-如何下載與引用TBIA資料-張俊怡.pdf20240522-如何下載與引用TBIA資料-張俊怡.pdf_20240522-如何下載與引用TBIA資料-張俊怡.pdf
20240522-如何下載與引用TBIA資料-張俊怡.pdf_20240522-如何下載與引用TBIA資料-張俊怡.pdf
 
20220317-開放授權規範-林誠夏.pdf_20220317-開放授權規範-林誠夏.pdf
20220317-開放授權規範-林誠夏.pdf_20220317-開放授權規範-林誠夏.pdf20220317-開放授權規範-林誠夏.pdf_20220317-開放授權規範-林誠夏.pdf
20220317-開放授權規範-林誠夏.pdf_20220317-開放授權規範-林誠夏.pdf
 
Lesson 3 Self-Introduction New words 1 .pptx
Lesson 3 Self-Introduction New words 1 .pptxLesson 3 Self-Introduction New words 1 .pptx
Lesson 3 Self-Introduction New words 1 .pptx
 
流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義
流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義
流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義 流體力學講義
 
20240521-開放資料的前置準備與清理-楊富鈞.pdf_20240521-開放資料的前置準備與清理-楊富鈞.pdf
20240521-開放資料的前置準備與清理-楊富鈞.pdf_20240521-開放資料的前置準備與清理-楊富鈞.pdf20240521-開放資料的前置準備與清理-楊富鈞.pdf_20240521-開放資料的前置準備與清理-楊富鈞.pdf
20240521-開放資料的前置準備與清理-楊富鈞.pdf_20240521-開放資料的前置準備與清理-楊富鈞.pdf
 
APII - interview notes 2024 for ogcio latest version
APII - interview notes 2024 for ogcio latest versionAPII - interview notes 2024 for ogcio latest version
APII - interview notes 2024 for ogcio latest version
 
Unit 3 Self-Introduction New words 3.pptx
Unit 3 Self-Introduction New words 3.pptxUnit 3 Self-Introduction New words 3.pptx
Unit 3 Self-Introduction New words 3.pptx
 
20230513-datapaper-何芷蔚.pdf_20230513-datapaper-何芷蔚.pdf
20230513-datapaper-何芷蔚.pdf_20230513-datapaper-何芷蔚.pdf20230513-datapaper-何芷蔚.pdf_20230513-datapaper-何芷蔚.pdf
20230513-datapaper-何芷蔚.pdf_20230513-datapaper-何芷蔚.pdf
 
20240520-敏感資料處理原則-柯智仁.pptx.pdf_20240520-敏感資料處理原則-柯智仁.pptx.pdf
20240520-敏感資料處理原則-柯智仁.pptx.pdf_20240520-敏感資料處理原則-柯智仁.pptx.pdf20240520-敏感資料處理原則-柯智仁.pptx.pdf_20240520-敏感資料處理原則-柯智仁.pptx.pdf
20240520-敏感資料處理原則-柯智仁.pptx.pdf_20240520-敏感資料處理原則-柯智仁.pptx.pdf
 
20240520-TaiBIF和GBIF介紹-劉璟儀.pdf_20240520-TaiBIF和GBIF介紹-劉璟儀.pdf
20240520-TaiBIF和GBIF介紹-劉璟儀.pdf_20240520-TaiBIF和GBIF介紹-劉璟儀.pdf20240520-TaiBIF和GBIF介紹-劉璟儀.pdf_20240520-TaiBIF和GBIF介紹-劉璟儀.pdf
20240520-TaiBIF和GBIF介紹-劉璟儀.pdf_20240520-TaiBIF和GBIF介紹-劉璟儀.pdf
 

Flexbox版面配置

Editor's Notes

  1. 2009 年的版本: display: box 現在已經不再跟 Flexbox 有任何關係 2011 過渡期版本: display: flexbox 只是草稿, 只被 IE10 實作, 如果可能的話應該避免使用 2012 最終版: display: flex