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

CSS_Flex_基礎二.pdf

darrenyaoyaoyao
October 26, 2020
Programming
0
54

 CSS_Flex_基礎二.pdf

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
49
Pug.pdf
darrenyaoyaoyao
0
54
Sass.pdf
darrenyaoyaoyao
0
50
jquery.pdf
darrenyaoyaoyao
1
55
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
44
bootstrap.pdf
darrenyaoyaoyao
1
68
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
80
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
48

Other Decks in Programming

See All in Programming
Chrome Extension Techniques from Hell
moznion
1
100
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
380
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
3.7k
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
180
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
590
安全に倒し切るリリースをするために：15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.6k
CRE Meetup！ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
550
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
290
Vibe Codingをせずに Clineを使っている
watany
10
4.1k
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
110
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.7k
Kamal 2 – Get Out of the Cloud
aleksandrov
0
140

Featured

See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Music & Morning Musume
bryan
46
6.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Raft: Consensus for Rubyists
vanstee
137
6.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
720

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 {

    } }