Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS_Flex_基礎_.pdf
Search
darrenyaoyaoyao
October 26, 2020
Programming
0
38
CSS_Flex_基礎_.pdf
darrenyaoyaoyao
October 26, 2020
Tweet
Share
More Decks by darrenyaoyaoyao
See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
46
Pug.pdf
darrenyaoyaoyao
0
52
Sass.pdf
darrenyaoyaoyao
0
48
jquery.pdf
darrenyaoyaoyao
1
52
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
42
bootstrap.pdf
darrenyaoyaoyao
1
65
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46
Other Decks in Programming
See All in Programming
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
ARA Ansible for the teams
kksat
0
150
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Ruby on cygwin 2025-02
fd0
0
140
Rails アプリ地図考 Flush Cut
makicamel
1
110
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
Formの複雑さに立ち向かう
bmthd
1
720
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Rails Girls Zürich Keynote
gr2m
94
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How STYLIGHT went responsive
nonsquared
98
5.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Facilitating Awesome Meetings
lara
51
6.2k
Statistics for Hackers
jakevdp
797
220k
The Invisible Side of Design
smashingmag
299
50k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Transcript
CSS Flex 盒⼦模型 基礎⼀ 排版進階練習
在 slidepin.cc 儲存這份投影片
今⽇⽬標 https://darrenyaoyao.github.io/
https://darrenyaoyao.github.io/
Flex Flex 是⼀套排版系統 display: flex
Flex-direction column row
Flex 比例 flex: 1 flex: 3
Flex 比例 flex: 1 flex: 3
align-items
position: fixed 固定位置
Overscroll 超出範圍,滑動屬性
Icon Icon 使⽤ <link rel="stylesheet" href=“https:// fonts.googleapis.com/icon? family=Material+Icons">
justify-content
練習⼀ 將左邊的 Youtube menu 還原
flex-wrap
flex flex 其實是 flex: flex-grow flex-shrink flex-basis
flex-grow 元件的伸展性,是⼀個數值,當空間分配還有剩餘時的 當前元件的伸展性,預設值為,如果設置為 0 則不會 縮放。
flex-shrink 元件的收縮性: 元件的伸展性,是⼀個數值,當空間分 配還不⾜時的當前元件的收縮性,預設值為 0 ,如果設 置為 0 則不會縮放。
flex-basis 元件的基準值,可使⽤不同的單位值。
flex flex : 1 其實是指 flex-grow : 1