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

CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
56

 CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
52
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
59
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
52
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
59
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
49
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
74
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
87
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
51

Other Decks in Programming

See All in Programming
個人軟體時代
Avatar for Ethan Huang ethanhuang13
0
320
Updates on MLS on Ruby (and maybe more)
Avatar for sylph01 sylph01
1
180
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
Avatar for JaiChangPark itsmedreamwalker
0
140
オープンセミナー2025@広島 「君はどこで動かすか？」 アンケート結果
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
260
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
Avatar for Wataru Takahara mipypf
0
1.1k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
280
print("Hello, World")
Avatar for 高見龍 eddie
1
520
サーバーサイドのビルド時間87倍高速化
Avatar for PLAID Tech plaidtech
PRO
0
720
Rancher と Terraform
Avatar for Ryoma Fujiwara fufuhu
2
240
Namespace and Its Future
Avatar for Satoshi Tagomori tagomoris
6
700
MCPとデザインシステムに立脚したデザインと実装の融合
Avatar for Yuku Kotani yukukotani
4
1.4k
テストカバレッジ100%を10年続けて得られた学びと品質
Avatar for もっち mottyzzz
2
500

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.8k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.6k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.9k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.9k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Side Projects
Avatar for Sacha Greif sachag
455
43k

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 {

    } }