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

CSS_Flex_基礎二.pdf

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
67
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
65
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
84
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
69
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
92
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
66
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
85
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
97
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
130
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
67

Other Decks in Programming

See All in Programming
Swiftのレキシカルスコープ管理
Avatar for kntk kntkymt
0
180
リセットCSSを1行消したらアクセシビリティが向上した話
Avatar for pvcresin pvcresin
4
530
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
2
420
「OSSがあるなら自作するな」は AI時代も正しいか ── Build vs Adopt の新しい判断基準
Avatar for Kumo Ishikawa kumorn5s
7
2.9k
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
Avatar for Kiichi Sugihara kiichisugihara
1
290
自動レビューエンジンの実装と運用 ~レビューのない世界へ~
Avatar for Kanato kurukuru1999
1
180
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
290
サーバーレスで作る、動画データ管理基盤
Avatar for Keigo Ibaraki oyasumipants
0
240
関係性から理解する"同一性"の型用語たち
Avatar for pvcresin pvcresin
2
400
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
630
新規プロダクトを高速で生み出すハーネスエンジニアリング
Avatar for Ryohei Ikegami seanchas116
3
240

Featured

See All Featured
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
10
37k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
150
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.2k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.1k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
200
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
50k
HDC tutorial
Avatar for Michiel Stock michielstock
2
670
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
390
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.3k

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 {

    } }