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
51
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
42
bootstrap.pdf
darrenyaoyaoyao
1
63
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46

Other Decks in Programming

See All in Programming
Jakarta EE meets AI
ivargrimstad
0
220
Contemporary Test Cases
maaretp
0
140
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
Realtime API 入門
riofujimon
0
150
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
距離関数を極める！ / SESSIONS 2024
gam0022
0
290
Jakarta EE meets AI
ivargrimstad
0
600
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
イベント駆動で成長して委員会
happymana
1
330

Featured

See All Featured
For a Future-Friendly Web
brad_frost
175
9.4k
Raft: Consensus for Rubyists
vanstee
136
6.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Building Applications with DynamoDB
mza
90
6.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
The Invisible Side of Design
smashingmag
298
50k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
It's Worth the Effort
3n
183
27k
KATA
mclloyd
29
14k
How to train your dragon (web standard)
notwaldorf
88
5.7k

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 {

    } }