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
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
ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12
yue4u
3
480
ドメインイベント増えすぎ問題
h0r15h0
2
350
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
210
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
210
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
2
390
PHPとAPI Platformで作る本格的なWeb APIアプリケーション（入門編） / phpcon 2024 Intro to API Platform
ttskch
0
260
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
110
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
3
290
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
1
1.3k
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
130
Spatial Rendering for Apple Vision Pro
warrenm
0
110
CSC305 Lecture 26
javiergs
PRO
0
140

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Fireside Chat
paigeccino
34
3.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Building Adaptive Systems
keathley
38
2.3k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Docker and Python
trallard
42
3.1k
A Philosophy of Restraint
colly
203
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
The World Runs on Bad Software
bkeepers
PRO
65
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k

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 {

    } }