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

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
50

 CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao

darrenyaoyaoyao

October 26, 2020
Tweet

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
58
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
70
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
56
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
71
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
58
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
78
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
92
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
130
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
58

Other Decks in Programming

See All in Programming
最初からAWS CDKで技術検証してもいいんじゃない？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
4
160
Takumiから考えるSecurity_Maturity_Model.pdf
Avatar for gessy0129 gessy0129
1
150
技術検証結果の整理と解析をAIに任せよう！
Avatar for Keisuke Ikeda keisukeikeda
0
130
AHC061解説
Avatar for Shun_PI shun_pi
0
410
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
Avatar for techs-targe targe
0
150
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
780
Codex CLIのSubagentsによる並列API実装 / Parallel API Implementation with Codex CLI Subagents
Avatar for 冨澤宝斗 takatty
2
220
Codex の「自走力」を高める
Avatar for yorifuji yorifuji
0
1.3k
AI駆動開発の本音 〜Claude Code並列開発で見えたエンジニアの新しい役割〜
Avatar for hisuzuya hisuzuya
4
530
社内規程RAGの精度を73.3% → 100%に改善した話
Avatar for oharu121 oharu121
13
8.3k
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
Avatar for Shinichi Nakagawa shinyorke
PRO
0
350
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.1k

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
150
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.2k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
160
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k

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