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

CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
76
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
72
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
89
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
72
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
100
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
74
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
92
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
99
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
150
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
77

Other Decks in Programming

See All in Programming
「つくるAI」だけではバグは見つからない　～テストに必要な「見つけるAI」を分離させる戦略～
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
230
Kiroで創り、AgentCoreで繋ぐ！AWSで実践する「AI-DLC」から「AIエージェント統合」までの最新地図
Avatar for matsukada licux
1
250
[PyCon KR 2026] More Variants, More Diversity for AI Accelerators
Avatar for Joongi Kim achimnol
0
130
MySQLとPostgreSQLって何が違うの？
Avatar for 赤神青空 akagami
PRO
0
160
XHTMLが残したもの
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
1
380
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
280
高専キャリア LT 発表内容
Avatar for Crysta1221 crysta1221
6
5.5k
まだ間に合う！今年の夏こそSchemeのマクロ展開器を完全理解！
Avatar for Masanori Ogino omasanori
0
620
tsc.rip を支える技術 / Kyoto.なんか #8
Avatar for Susisu susisu
0
4.2k
FastAPI の並行処理モデルを完全に理解する
Avatar for Yuki Ishikawa hoto17296
9
3.7k
レビュー履歴をAIに食わせて、 Compose移行を加速するs
Avatar for Yuki Shiho shihochan
0
260
Oxlintはいいぞ（続）
Avatar for Yuji Yamaguchi yug1224
1
530

Featured

See All Featured
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
510
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
270
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
370
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
360
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
510
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.5k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.9k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k

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 {

    } }