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

CSS_Flex_基礎二.pdf

Avatar for darrenyaoyao darrenyaoyao
October 24, 2020
Programming
28
0

 CSS_Flex_基礎二.pdf

Avatar for darrenyaoyao

darrenyaoyao

October 24, 2020

More Decks by darrenyaoyao

See All by darrenyaoyao
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyao darrenyaoyao
0
27
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyao darrenyaoyao
0
32
HTML__CSS基礎二.pdf
Avatar for darrenyaoyao darrenyaoyao
0
25
Javascript進階.pdf
Avatar for darrenyaoyao darrenyaoyao
0
21
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyao darrenyaoyao
0
75
Bootstrap.pdf
Avatar for darrenyaoyao darrenyaoyao
0
33
Sass_基礎篇.pdf
Avatar for darrenyaoyao darrenyaoyao
0
32
Github_介紹.pdf
Avatar for darrenyaoyao darrenyaoyao
0
120
Javascript_基礎二.pdf
Avatar for darrenyaoyao darrenyaoyao
0
22

Other Decks in Programming

See All in Programming
HTML-in-Canvasで作る未来のWeb UI表現
Avatar for IKEDA Yasunobu clockmaker
5
5.1k
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
380
残高管理から台帳サービスへの進化
Avatar for kobaryo artoy
1
200
複雑なUIコンポーネントとの ⻑い付き合い⽅：波及するバグからテスト戦略を経て、安全な再設計へ
Avatar for masahiko.asai mixplace
0
410
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
430
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
Avatar for akase244 akase244
0
150
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
190
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
自サークルのIdPからログアウトできるようになるまで
Avatar for taiseiue taiseiue
1
140
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
160
npm との違いを手がかりにGo の依存管理を理解したい
Avatar for OPTiM optim
0
300
Agents on Rails - Rails at Scale 2026
Avatar for Irina Nazarova irinanazarova
0
560

Featured

See All Featured
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
220
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
560
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
22k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8.1k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
530
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
4
1.2k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
340
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
240
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
630

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 {

    } }