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
65
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46

Other Decks in Programming

See All in Programming
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
Grafana Cloudとソラカメ
devoc
0
140
技術を根付かせる / How to make technology take root
kubode
1
240
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Why Our Code Smells
bkeepers
PRO
335
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Being A Developer After 40
akosma
89
590k
A Modern Web Designer's Workflow
chriscoyier
693
190k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Code Review Best Practice
trishagee
66
17k

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 {

    } }