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

CSS_Flex_基礎二.pdf

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
68
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
85
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
70
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
97
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
66
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
86
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
97
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
140
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
69

Other Decks in Programming

See All in Programming
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
Avatar for Yuku Kotani yukukotani
3
3.5k
AIとASP.NET Coreで雑Webアプリを作った話
Avatar for Mayuki Sawatari mayuki
0
480
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
210
Contextとはなにか
Avatar for chiroruxx chiroruxx
0
240
AIで効率化できた業務・日常
Avatar for Ochtum ochtum
0
120
Agentic UI
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
Why Laravel apps break—Mastering the fundamentals to keep them maintainable
Avatar for 武田 憲太郎 kentaroutakeda
1
340
Spec Driven Development | AI Summit Lisbon
Avatar for Daniel Sogl danielsogl
PRO
0
170
Spring Security 実践 ─ GraphQL APIで実務に役立つ 認証・認可 を学ぶ
Avatar for Wagyu wagyu
0
210
AIとRubyの静的型付け
Avatar for ukin0k0 ukin0k0
0
560
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
Avatar for hirokuni-maeta hirokunimaeta
0
520
ふつうのFeature Flag実践入門
Avatar for irof irof
7
3.7k

Featured

See All Featured
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
140
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.4k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
460
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
280
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
420
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
270
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
360
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.5k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
1.6k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.3k

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 {

    } }