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

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
58
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
85
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
70
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
97
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
66
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
86
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
97
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
140
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
69

Other Decks in Programming

See All in Programming
IBM Bobを活用したレガシーアプリの最新化
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
1
180
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
Avatar for Naoki Kishida kishida
2
120
代数的データ型って何が嬉しいの？ #frontend_phpcon_do
Avatar for Takuma Kajikawa kajitack
8
3.3k
JavaDoc 再入門
Avatar for nagise nagise
0
310
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
510
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
250
tsserverとは何だったのか、これからどうなるのか
Avatar for Ryota Nakamura nowaki28
1
460
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
Avatar for daitasu daitasu
0
190
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
Avatar for nrs nrslib
6
860
ふつうのFeature Flag実践入門
Avatar for irof irof
7
3.7k
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
Avatar for snhryt snhryt
0
130
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
690

Featured

See All Featured
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
410
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2k
Done Done
Avatar for chrislema chrislema
186
16k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.4k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
860
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
240
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
270
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
200

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