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

CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
55

 CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
50
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
59
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
52
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
57
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
48
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
71
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
83
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
50

Other Decks in Programming

See All in Programming
ふつうの技術スタックでアート作品を作ってみる
Avatar for Akira Yagi akira888
0
220
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Avatar for Yuka O’oka oukayuka
2
880
20250628_非エンジニアがバイブコーディングしてみた
Avatar for ponponmikan ponponmikankan
0
530
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
650
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
Avatar for Tetsuya Kikuchi tkikuc
20
3.8k
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
2
980
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
CursorはMCPを使った方が良いぞ
Avatar for taiga taigakono
1
200
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
Avatar for Nealle nealle
0
120
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
0
160
Team topologies and the microservice architecture: a synergistic relationship
Avatar for Chris Richardson cer
PRO
0
1.1k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
110

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.6k
Side Projects
Avatar for Sacha Greif sachag
455
42k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
940

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 {

    } }