Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS_Flex_基礎二.pdf

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
77
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
78
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
96
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
79
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
110
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
80
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
95
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
100
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
150
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
79

Other Decks in Programming

See All in Programming
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
Avatar for Naoki Kishida kishida
2
220
Spec-Driven Development - Why Vaadin Is the Perfect Fit
Avatar for Simon Martinelli simas
PRO
0
180
JIS keyboard support in Omarchy
Avatar for LEF lef237
0
170
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
500
[2026-10-09]一枚の布で作らなくてもいい。 信頼性は「パッチワーク」で紡がれる～既存の運用と新しい可能性をつなぎ合わせてきたCREの話～
Avatar for tosite tosite
0
120
3回つくってわかった、
定期実行ジョブ基盤の本質情報
Avatar for Naoto Takai takai
4
3.4k
ActionController meets Protocol Buffers
Avatar for Sorah Fukumori sorah
1
750
선언형 햅틱 라이브러리 진동을 소개합니다
Avatar for HyunWoo Lee l2hyunwoo
1
120
LLM 101
Avatar for Leonardo YongUk Kim dalinaum
0
350
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
Avatar for aoshi aoshi
0
430
TS 7.0 で baseUrl が使えなくなった今、パスエイリアスをどうするか
Avatar for おおいし bicstone
1
270
ChromeでローカルLLM
Avatar for ryu ryu1013
0
180

Featured

See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
650
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
300
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.7k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
570
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
650
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
290
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.4k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
620

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 {

    } }