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

CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
56

 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
52
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
61
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
52
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
61
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
51
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
74
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
87
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
120
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
51

Other Decks in Programming

See All in Programming
オフライン対応！Flutterアプリに全文検索エンジンを実装する @FlutterKaigi2025
Avatar for JaiChangPark itsmedreamwalker
2
300
モビリティSaaSにおけるデータ利活用の発展
Avatar for Nealle nealle
1
640
モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜
Avatar for Maple fuuki12
0
120
CloudNative Days Winter 2025: 一週間で作る低レイヤコンテナランタイム
Avatar for ternbusty ternbusty
7
1.8k
AIエージェントでのJava開発がはかどるMCPをAIを使って開発してみた / java mcp for jjug
Avatar for Naoki Kishida kishida
4
800
高単価案件で働くための心構え
Avatar for Katsuma Narisawa nullnull
0
170
関数の挙動書き換える
Avatar for takato fukui takatofukui
4
750
乱雑なコードの整理から学ぶ設計の初歩
Avatar for 増田 亨 masuda220
PRO
32
15k
DartASTとその活用
Avatar for そた sotaatos
2
150
OSS開発者の憂鬱
Avatar for Yusuke Wada yusukebe
14
11k
Rails Girls Sapporo 2ndの裏側―準備の日々から見えた、私が得たもの / SAPPORO ENGINEER BASE #11
Avatar for はる lemonade_37
2
190
アーキテクチャと考える迷子にならない開発者テスト
Avatar for irof irof
9
3.3k

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1k
Navigating Team Friction
Avatar for Lara Hogan lara
190
16k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
11
940
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k

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 {

    } }