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

CSS_Flex_基礎_.pdf

darrenyaoyaoyao
October 26, 2020
Programming
0
38

 CSS_Flex_基礎_.pdf

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

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

Other Decks in Programming

See All in Programming
TCAを用いたAmebaのリアーキテクチャ
dazy
0
230
技術を改善し続ける
gumioji
0
180
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
140
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
190
1年目の私に伝えたい！テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
660
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
やっと腹落ち「スプリント毎に動くモノをリリースする」〜ゼロから始めるメガバンクグループのアジャイル実践〜
sasakendayo
0
190
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.9k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
300
JAWS Days 2025のインフラ
komakichi
1
360
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
510

Featured

See All Featured
GraphQLとの向き合い方2022年版
quramy
44
14k
Practical Orchestrator
shlominoach
186
10k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Ace a Technical Interview
jacobian
276
23k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Bash Introduction
62gerente
611
210k
Building an army of robots
kneath
303
45k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Raft: Consensus for Rubyists
vanstee
137
6.8k

Transcript

  1. CSS Flex 盒⼦模型 基礎⼀ 排版進階練習

  2. 在 slidepin.cc 儲存這份投影片

  3. 今⽇⽬標 https://darrenyaoyao.github.io/

  4. https://darrenyaoyao.github.io/

  5. Flex Flex 是⼀套排版系統
 display: flex

  6. Flex-direction column row

  7. Flex 比例 flex: 1 flex: 3

  8. Flex 比例 flex: 1 flex: 3

  9. align-items

  10. position: fixed 固定位置

  11. Overscroll 超出範圍，滑動屬性

  12. Icon Icon 使⽤ <link rel="stylesheet" href=“https:// fonts.googleapis.com/icon? family=Material+Icons">

  13. justify-content

  14. 練習⼀ 將左邊的 Youtube menu 還原

  15. flex-wrap

  16. flex flex 其實是
 flex: flex-grow flex-shrink flex-basis

  17. flex-grow 元件的伸展性，是⼀個數值，當空間分配還有剩餘時的 當前元件的伸展性，預設值為，如果設置為 0 則不會 縮放。

  18. flex-shrink 元件的收縮性: 元件的伸展性，是⼀個數值，當空間分 配還不⾜時的當前元件的收縮性，預設值為 0 ，如果設 置為 0 則不會縮放。

  19. flex-basis 元件的基準值，可使⽤不同的單位值。

  20. flex flex : 1
 其實是指 flex-grow : 1