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

CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
63
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
60
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
75
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
58
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
79
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
61
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
81
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
95
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
130
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
60

Other Decks in Programming

See All in Programming
iOS機能開発のAI環境と起きた変化
Avatar for Ryu-nakayama ryunakayama
0
170
瑠璃の宝石に学ぶ技術の声の聴き方 / 【劇場版】アニメから得た学びを発表会2026 #エンジニアニメ
Avatar for mazrean mazrean
0
190
事業会社でのセキュリティ長期インターンについて
Avatar for inlet-back masachikaura
0
230
PHP でエミュレータを自作して Ubuntu を動かそう
Avatar for memory m3m0r7
PRO
2
170
Swift Concurrency Type System
Avatar for Yasuhiro Inami inamiy
0
390
見せてもらおうか、 OpenSearchの性能とやらを！
Avatar for shunta ichikawa shunta27
1
180
Running Swift without an OS
Avatar for Kishikawa Katsumi kishikawakatsumi
0
690
ドメインイベントでビジネスロジックを解きほぐす #phpcon_odawara
Avatar for Takuma Kajikawa kajitack
2
120
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
Avatar for Ryuta Hamasaki avosalmon
1
320
ハンズオンで学ぶクラウドネイティブ
Avatar for Tatsuki Minami tatsukiminami
0
110
へんな働き方
Avatar for Yusuke Wada yusukebe
6
2.9k
Codex CLIのSubagentsによる並列API実装 / Parallel API Implementation with Codex CLI Subagents
Avatar for 冨澤宝斗 takatty
2
860

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
740
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
110
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.5k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.5k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
290
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
100
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
120

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 {

    } }