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

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
44

 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
51
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
59
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
52
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
57
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
48
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
72
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
83
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
51

Other Decks in Programming

See All in Programming
Streamlitで実現できるようになったこと、実現してくれたこと
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
2
110
Rails Frontend Evolution: It Was a Setup All Along
Avatar for Svyatoslav Kryukov skryukov
0
290
A full stack side project webapp all in Kotlin (KotlinConf 2025)
Avatar for Dan Kim dankim
0
150
Claude Code で Astro blog を Pages から Workers へ移行してみた
Avatar for Kei Kamikawa codehex
0
120
AI時代のソフトウェア開発を考える（2025/07版） / Agentic Software Engineering Findy 2025-07 Edition
Avatar for Takuto Wada twada
PRO
99
37k
High-Level Programming Languages in AI Era -Human Thought and Mind-
Avatar for Hayato Ishida hayat01sh1da
PRO
0
910
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
Avatar for Tomohisa Takaoka tomohisa
0
170
階層化自動テストで開発に機動力を
Avatar for ICKX ickx
0
320
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
Avatar for Kenji Kono konokenj
6
830
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
Avatar for yoshiyoshifujii yoshiyoshifujii
4
440
状態遷移図を書こう / Sequence Chart vs State Diagram
Avatar for Kuniwak orgachem
PRO
2
210
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
Avatar for Ahmed EBEN HASSINE ahmedbhs123
0
220

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
520
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k

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