Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS_Flex_基礎二.pdf

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
67
0

 CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao

darrenyaoyaoyao

October 26, 2020

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
65
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
84
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
69
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
92
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
66
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
85
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
97
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
130
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
67

Other Decks in Programming

See All in Programming
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
160
プラグインで拡張される Context をtype-safe にする難しさと設計判断
Avatar for kazupon kazupon
2
270
色即是空、空即是色、データサイエンス
Avatar for KamoNeggi kamoneggi
1
140
OCRを使ってゲームのアイテムをデータ化する
Avatar for Kishikawa Katsumi kishikawakatsumi
0
110
TSKaigi2026-静的解析への投資がAI時代のコード品質を支える ── カスタムESLintルールの設計と運用
Avatar for HayatoKudou hayatokudou
5
900
権限チェックの一貫性を型で守る TypeScript による多層防御
Avatar for aster-mnch (kitagawa) mnch
3
440
SkillsをS3 Filesに置く時のあれこれ
Avatar for watany watany
4
1.7k
サプライチェーン攻撃対策「層を重ねて落ちない壁」を10日間で組み上げた話 #TechLeadConf2026
Avatar for Kashun Yoshida kashewnuts
1
330
PHPでバイナリをパースして理解するASN.1
Avatar for muno92 muno92
PRO
0
470
Moments When Things Go Wrong
Avatar for Aurimas Liutikas aurimas
3
100
Swiftのレキシカルスコープ管理
Avatar for kntk kntkymt
0
180
Migrations : C'est une question d'hygiène !
Avatar for Vincent Amstoutz vinceamstoutz
0
880

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
150
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.3k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
120
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.3k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
Designing for Performance
Avatar for Lara Hogan lara
611
70k

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 {

    } }