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

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
57
0

 CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao

darrenyaoyaoyao

October 26, 2020

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
65
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
84
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
69
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
92
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
66
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
85
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
97
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
130
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
67

Other Decks in Programming

See All in Programming
自動レビューエンジンの実装と運用 ~レビューのない世界へ~
Avatar for Kanato kurukuru1999
1
180
ビジネスモデルから紐解く、AI+型駆動開発
Avatar for Hiroki Omote hirokiomote
2
1.1k
Sans tests, vos agents ne sont pas fiables
Avatar for Nathan Abondance nabondance
0
150
サーバーレスで作る、動画データ管理基盤
Avatar for Keigo Ibaraki oyasumipants
0
240
AI時代だからこそ「Bloc」を採用する価値があるのかもしれない
Avatar for takuro abe takuroabe
0
220
継続的な負荷検証を目指して
Avatar for Kazuhiko Yamashita pyama86
3
1.4k
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
2
380
20年以上続くプロダクトでも使い続けられる静的解析ツールを求めて
Avatar for Atsushi Matsuo matsuo_atsushi
0
160
TSKaigi 2026 TypeScriptバックエンドのオブザーバビリティ戦略 — Datadog × NestJSの実践
Avatar for Taisei Yamamoto taiseiyamamotoan
1
130
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
390
PHPでローカル環境用のSSL/TLS証明書を発行することはできるのか？ #phpconkagawa
Avatar for akase244 akase244
0
380
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
120

Featured

See All Featured
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.5k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.1k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
760
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
240
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
460
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.3k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
120
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
70
39k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
300
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k

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