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

CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
54

 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
49
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
54
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
50
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
56
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
44
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
68
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
80
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
48

Other Decks in Programming

See All in Programming
ニーリーQAのこれまでとこれから
Avatar for Nealle nealle
2
160
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
Avatar for Koki Senda thousanda
1
110
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
Avatar for ALGO ARTIS algoartis
0
150
Lambda(Python)の リファクタリングが好きなんです
Avatar for komakichi komakichi
4
240
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
Avatar for Takashi Kokubun k0kubun
1
1.9k
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
Avatar for MinoDriven minodriven
8
1.9k
読書シェア会 vol.4 『ダイナミックリチーミング 第2版』
Avatar for Kotaro Kamashima kotaro666
0
110
「理解」を重視したAI活用開発
Avatar for FastDOCTOR fast_doctor
0
270
State of Namespace
Avatar for Satoshi Tagomori tagomoris
5
2.4k
ComposeでWebアプリを作る技術
Avatar for てべすてん tbsten
0
130
スモールスタートで始めるためのLambda×モノリス（Lambdalith）
Avatar for アキキー akihisaikeda
2
340
GitHub Copilot for Azureを使い倒したい
Avatar for Kento.Yamada ymd65536
1
310

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
157
25k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
Navigating Team Friction
Avatar for Lara Hogan lara
185
15k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
33k
Building an army of robots
Avatar for Kyle Neath kneath
305
45k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
690
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.6k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
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 {

    } }