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
45
Pug.pdf
darrenyaoyaoyao
0
52
Sass.pdf
darrenyaoyaoyao
0
47
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
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
270
PHPとAPI Platformで作る本格的なWeb APIアプリケーション（入門編） / phpcon 2024 Intro to API Platform
ttskch
0
210
たのしいparse.y
ydah
3
120
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
MCP with Cloudflare Workers
yusukebe
2
220
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
930
ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12
yue4u
3
470
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
350
useSyncExternalStoreを使いまくる
ssssota
6
1k
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
A better future with KSS
kneath
238
17k
Visualization
eitanlees
146
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Navigating Team Friction
lara
183
15k
YesSQL, Process and Tooling at Scale
rocio
169
14k
GraphQLとの向き合い方2022年版
quramy
44
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
A Modern Web Designer's Workflow
chriscoyier
693
190k

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 {

    } }