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
Androidアプリの One Experience リリース
nein37
0
1.2k
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
6k
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
250
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
940
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
180
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
870
良いユニットテストを書こう
mototakatsu
11
3.6k
functionalなアプローチで動的要素を排除する
ryopeko
1
210
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.4k
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.4k
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
1.9k
快速入門可觀測性
blueswen
0
500

Featured

See All Featured
Documentation Writing (for coders)
carmenintech
67
4.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Designing for Performance
lara
604
68k
Why Our Code Smells
bkeepers
PRO
335
57k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Building Your Own Lightsaber
phodgson
104
6.2k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Rails Girls Zürich Keynote
gr2m
94
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k

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 {

    } }