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

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyao darrenyaoyao
October 24, 2020
Programming
0
21

 CSS_Flex_基礎_.pdf

Avatar for darrenyaoyao

darrenyaoyao

October 24, 2020
Tweet

More Decks by darrenyaoyao

See All by darrenyaoyao
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyao darrenyaoyao
0
21
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyao darrenyaoyao
0
24
HTML__CSS基礎二.pdf
Avatar for darrenyaoyao darrenyaoyao
0
16
Javascript進階.pdf
Avatar for darrenyaoyao darrenyaoyao
0
15
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyao darrenyaoyao
0
19
Bootstrap.pdf
Avatar for darrenyaoyao darrenyaoyao
0
24
Sass_基礎篇.pdf
Avatar for darrenyaoyao darrenyaoyao
0
25
Github_介紹.pdf
Avatar for darrenyaoyao darrenyaoyao
0
110
Javascript_基礎二.pdf
Avatar for darrenyaoyao darrenyaoyao
0
18

Other Decks in Programming

See All in Programming
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6.1k
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
500
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
280
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
330
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
220
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.6k
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
230
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
270
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
Avatar for Date Huang tjjh89017
0
180

Featured

See All Featured
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
650
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
59
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
182
10k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
130
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
360

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