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

CSS_Flex_基礎_.pdf

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
49

 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
57
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
69
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
55
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
69
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
55
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
76
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
90
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
120
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
56

Other Decks in Programming

See All in Programming
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
120
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう！
Avatar for neruneruo neruneruo
4
2.7k
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.8k
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
140
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.7k
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
490
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
540
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
770
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
170
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
600
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
12
6.4k

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.3k
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.5k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
120
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
210
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
300
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
420

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