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

CSS_Flex_基礎_.pdf

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
68
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
72
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
89
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
72
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
100
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
73
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
91
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
99
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
150
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
77

Other Decks in Programming

See All in Programming
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
270
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
860
ソフトウェアラスタライザ
Avatar for Fadis fadis
1
660
Detecting Compromised CI with eBPF and Cilium Tetragon
Avatar for Liz Rice lizrice
0
260
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
730
Dockerfile CMD for Node.js
Avatar for Ohno Keita grazie1999
0
120
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
180
仕様駆動開発の消費期限
Avatar for watany watany
20
9k
MySQLとPostgreSQLって何が違うの？
Avatar for 赤神青空 akagami
0
140
「つくるAI」だけではバグは見つからない　～テストに必要な「見つけるAI」を分離させる戦略～
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
180
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
Avatar for hond hond0413
0
260
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
Avatar for Daisuke Garaike contour_gara
0
610

Featured

See All Featured
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
380
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
500
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
650
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
510
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k

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