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

CSS_Flex_基礎二.pdf

darrenyaoyaoyao
October 26, 2020
Programming
0
52

 CSS_Flex_基礎二.pdf

darrenyaoyaoyao

October 26, 2020
Tweet

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
64
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46

Other Decks in Programming

See All in Programming
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
940
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
150
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
240
Azure AI Foundryのご紹介
qt_luigi
1
210
Rubyでつくるパケットキャプチャツール
ydah
0
170
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
300
Package Traits
ikesyo
1
210
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
6k
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ！
ymd65536
1
130
AHC041解説
terryu16
0
400
テストコード書いてみませんか？
onopon
2
340
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
6
700

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
Adopting Sorbet at Scale
ufuk
74
9.2k
A Tale of Four Properties
chriscoyier
157
23k
Why Our Code Smells
bkeepers
PRO
335
57k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Optimising Largest Contentful Paint
csswizardry
33
3k
Speed Design
sergeychernyshev
25
740
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Making the Leap to Tech Lead
cromwellryan
133
9k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k

Transcript

  1. CSS Flex 盒⼦模型 基礎⼆ 排版進階練習

  2. 今⽇⽬標

  3. https://darrenyaoyao.github.io/

  4. Flex-direction column row

  5. Flex 比例 flex: 3 flex: 1

  6. justify-content

  7. align-items

  8. RWD 響應式網站 網站排版會隨著螢幕⼤⼩不同
 ⽽有所調整

  9. media query @media screen and (max-width: 900px) { .container {

    } }