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 Rinchoku rinchoku
1
610
Hypervel - A Coroutine Framework for Laravel Artisans
Avatar for Albert Chen albertcht
1
110
Select API from Kotlin Coroutine
Avatar for Matsuda Jumpei jmatsu
1
200
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Avatar for Yuka O’oka oukayuka
2
880
Flutterで備える！Accessibility Nutrition Labels完全ガイド
Avatar for 野瀬田　裕樹 yuukiw00w
0
130
都市をデータで見るってこういうこと　PLATEAU属性情報入門
Avatar for nokonoko1203 nokonoko1203
1
580
Result型で“失敗”を型にするPHPコードの書き方
Avatar for Takuma Kajikawa kajitack
4
550
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
Avatar for Nealle nealle
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
660
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
PipeCDのプラグイン化で目指すところ
Avatar for Warashi warashi
1
230
Go1.25からのGOMAXPROCS
Avatar for kuro kuro_kurorrr
1
830

Featured

See All Featured
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
18k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
800
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
KATA
Avatar for Megan Lloyd mclloyd
30
14k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k

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 {

    } }