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
62
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
67
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
87
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
71
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
98
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
68
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
88
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
99
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
140
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
71

Other Decks in Programming

See All in Programming
初めてのKubernetes 本番運用でハマった話
Avatar for Kobujee_53 oku053
0
120
コーディングルールの鮮度を保ちたい for SRE NEXT 2026 / keep-fresh-go-internal-conventions-sre-next-2026
Avatar for NAGATA Hiroaki handlename
0
140
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
1.2k
「正の参照」と 「負の導出」で組む ハーネスエンジニアリング
Avatar for Masahiro Watanabe cottpan
1
140
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
Avatar for ioki ioki
0
270
共通化で考えるべきは、実装より公開する型だった
Avatar for code-egg codeegg
0
210
アルゴリズムは何を圧縮しているのか ─ Haskell から育った「圧縮代数」というメンタルモデル
Avatar for Naoya Ito naoya
16
3.3k
フィードバックで育てるAI開発
Avatar for Kota Minato kotaminato
1
110
LaravelLive Japan の裏方のすべて — 第188回 PHP勉強会＠東京 (2026-06-24)
Avatar for Suguru Oki / スー suguruooki
2
150
関数型プログラミングのメリットって何だろう？
Avatar for わんこ(Wanko_IT) wanko_it
0
170
AI時代の仕事技芸論〜ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ（スクフェス仙台 2026バージョン）
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
0
620
ビデオ通話が繋がる0.2秒で何が起きているのか
Avatar for Miyamoto Naoyuki supurazako
2
140

Featured

See All Featured
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
9.6k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
230
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
490
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.1k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k

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