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
42
Pug.pdf
darrenyaoyaoyao
0
50
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
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism - An Example
philipschwarz
PRO
0
170
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
9
4.1k
Golang と Erlang
taiyow
8
1.9k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
340
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.6k
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.7k
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Visualization
eitanlees
144
15k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Rails Girls Zürich Keynote
gr2m
93
13k
We Have a Design System, Now What?
morganepeng
50
7.2k
4 Signs Your Business is Dying
shpigford
180
21k

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 {

    } }