Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
45

 CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
52
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
59
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
52
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
59
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
49
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
74
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
87
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
120
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
51

Other Decks in Programming

See All in Programming
CSC509 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
330
Let's Write a Train Tracking Algorithm
Avatar for Chris Trott twocentstudios
0
220
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
Avatar for m_t_tion1 kaorumuta
2
490
ポスターセッション: 「まっすぐ行って、右！」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
Avatar for komo_fr komofr
0
950
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
Avatar for nrs nrslib
3
370
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
Avatar for Masayuki Izumi izumin5210
0
590
CSC305 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
260
Advance Your Career with Open Source
Avatar for ivargrimstad ivargrimstad
0
330
AIで開発生産性を上げる個人とチームの取り組み
Avatar for TaniiGo taniigo
0
130
Django Ninja による API 開発効率化とリプレースの実践
Avatar for Kashun Yoshida kashewnuts
0
930
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
Avatar for ukitaka ukitaka
0
380
CSC509 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
410

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
10k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
45
2.5k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k

Transcript

  1. CSS Flex 盒⼦模型 基礎⼀ 排版進階練習

  2. 在 slidepin.cc 儲存這份投影片

  3. 今⽇⽬標 https://darrenyaoyao.github.io/

  4. https://darrenyaoyao.github.io/

  5. Flex Flex 是⼀套排版系統
 display: flex

  6. Flex-direction column row

  7. Flex 比例 flex: 1 flex: 3

  8. Flex 比例 flex: 1 flex: 3

  9. align-items

  10. position: fixed 固定位置

  11. Overscroll 超出範圍，滑動屬性

  12. Icon Icon 使⽤ <link rel="stylesheet" href=“https:// fonts.googleapis.com/icon? family=Material+Icons">

  13. justify-content

  14. 練習⼀ 將左邊的 Youtube menu 還原

  15. flex-wrap

  16. flex flex 其實是
 flex: flex-grow flex-shrink flex-basis

  17. flex-grow 元件的伸展性，是⼀個數值，當空間分配還有剩餘時的 當前元件的伸展性，預設值為，如果設置為 0 則不會 縮放。

  18. flex-shrink 元件的收縮性: 元件的伸展性，是⼀個數值，當空間分 配還不⾜時的當前元件的收縮性，預設值為 0 ，如果設 置為 0 則不會縮放。

  19. flex-basis 元件的基準值，可使⽤不同的單位值。

  20. flex flex : 1
 其實是指 flex-grow : 1