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

CSS_Flex_基礎二.pdf

darrenyaoyaoyao
October 26, 2020
Programming
0
52

 CSS_Flex_基礎二.pdf

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
45
Pug.pdf
darrenyaoyaoyao
0
52
Sass.pdf
darrenyaoyaoyao
0
47
jquery.pdf
darrenyaoyaoyao
1
51
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
42
bootstrap.pdf
darrenyaoyaoyao
1
63
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46

Other Decks in Programming

See All in Programming
3rd party scriptでもReactを使いたい！ Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
Better Code Design in PHP
afilina
PRO
0
130
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Jakarta EE meets AI
ivargrimstad
0
640
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
140
Laravel や Symfony で手っ取り早く
OpenAPI のドキュメントを作成する
azuki
2
120
レガシーシステムにどう立ち向かうか　複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
弊社の「意識ﾁｮｯﾄ低いアーキテクチャ」10選
texmeijin
5
24k
Arm移行タイムアタック
qnighy
0
330
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
Jakarta EE meets AI
ivargrimstad
0
190
cmp.Or に感動した
otakakot
3
190

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Designing for humans not robots
tammielis
250
25k
Agile that works and the tools we love
rasmusluckow
327
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Raft: Consensus for Rubyists
vanstee
136
6.6k
What's new in Ruby 2.0
geeforr
343
31k
Site-Speed That Sticks
csswizardry
0
26
Imperfection Machines: The Place of Print at Facebook
scottboms
265
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 {

    } }