Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

CSS_Flex_基礎_.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
48

 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
54
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
65
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
53
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
65
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
53
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
75
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
89
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
120
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
53

Other Decks in Programming

See All in Programming
愛される翻訳の秘訣
Avatar for Kishikawa Katsumi kishikawakatsumi
3
320
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
230
令和最新版Android Studioで化石デバイス向けアプリを作る
Avatar for Sora Arakawa arkw
0
400
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
Avatar for suna-big sunabig
0
160
著者と進める！『AIと個人開発したくなったらまずCursorで要件定義だ！』
Avatar for yasuna yasunacoffee
0
140
宅宅自以為的浪漫：跟 AI 一起為自己辦的研討會寫一個售票系統
Avatar for 高見龍 eddie
0
500
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
Avatar for n0bisuke n0bisuke2
2
1k
認証・認可の基本を学ぼう前編
Avatar for kaza kouyuume
0
200
DSPy Meetup Tokyo #1 - はじめてのDSPy
Avatar for Masahiro Nishimi masahiro_nishimi
1
170
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
29k
connect-python: convenient protobuf RPC for Python
Avatar for Anuraag Agrawal anuraaga
0
410
WebRTC と Rust と 8K 60fps
Avatar for tnoho tnoho
2
2k

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
58
6.2k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k

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