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

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
52
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
62
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
79
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
62
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
83
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
62
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
83
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
96
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
130
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
65

Other Decks in Programming

See All in Programming
GoogleCloudとterraform完全に理解した
Avatar for Terisuke terisuke
1
160
Kingdom of the Machine
Avatar for yui-knk yui_knk
2
1.1k
NakouPAY説明用
Avatar for Annouim0 annouim0
0
270
Claude CodeでETLジョブ実行テストを自動化してみた
Avatar for yoshiki kasama yoshikikasama
0
990
「Linuxサーバー構築標準教科書」を読んでみた #ツナギメオフライン.7
Avatar for akase244 akase244
0
1.4k
t *testing.T は どこからやってくるの？
Avatar for Kotaro Otaka otakakot
1
800
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
200
【26新卒研修資料】TDD実装演習
Avatar for ディップ株式会社 dip_tech
PRO
0
110
UIの境界線をデザインする | React Tokyo #15 メイントーク
Avatar for SASAPIYO sasagar
2
390
AI時代のエンジニアリングの原則 / Engineering Principles in the AI ​​Era
Avatar for haru860 haru860
0
820
AIを導入する前にやるべきこと
Avatar for Negima negima
2
300
PHP で mp3 プレイヤーを実装しよう
Avatar for memory m3m0r7
PRO
0
290

Featured

See All Featured
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.3k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.7k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
380
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
260
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
330
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
170
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
410
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
270
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.5k

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