Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyao darrenyaoyao
October 24, 2020
Programming
29
0

 CSS_Flex_基礎_.pdf

Avatar for darrenyaoyao

darrenyaoyao

October 24, 2020

More Decks by darrenyaoyao

See All by darrenyaoyao
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyao darrenyaoyao
0
27
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyao darrenyaoyao
0
32
HTML__CSS基礎二.pdf
Avatar for darrenyaoyao darrenyaoyao
0
25
Javascript進階.pdf
Avatar for darrenyaoyao darrenyaoyao
0
21
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyao darrenyaoyao
0
75
Bootstrap.pdf
Avatar for darrenyaoyao darrenyaoyao
0
33
Sass_基礎篇.pdf
Avatar for darrenyaoyao darrenyaoyao
0
32
Github_介紹.pdf
Avatar for darrenyaoyao darrenyaoyao
0
120
Javascript_基礎二.pdf
Avatar for darrenyaoyao darrenyaoyao
0
22

Other Decks in Programming

See All in Programming
Domain-Driven Transformation
Avatar for Henning Schwentner hschwentner
2
2.3k
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
Avatar for kasacchiful kasacchiful
PRO
0
150
TechTown - Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
130
コードレビューのボトルネックを"する側"と"される側"の両面から解消する
Avatar for yub0n yub0n
2
1.6k
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
180
作って学ぶSpring BootのAuto Configuration / JJUG Night Seminar 2026-10-19
Avatar for Ryo Shindo rshindo
0
140
パスワード再設定メールのURLについて知っておこう
Avatar for uyuki uyuki234
0
160
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
160
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
1.7k
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
Avatar for y-ohgi y0hgi
0
270
Long Living Tokens, Die, Die, Die! (or: The One Ring is Banned in Modern)
Avatar for sylph01 sylph01
0
300
ジョジョの世界をXRで再現する
Avatar for mofurune mofurune
0
160

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
480
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
490
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
4
4k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.1k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
280
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k

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