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

CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
0
56

 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
52
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
59
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
52
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
59
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
49
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
74
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
87
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
120
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
51

Other Decks in Programming

See All in Programming
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
Avatar for Atsuya Sato natmark
2
450
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
Avatar for Itaru Ota ota1022
0
240
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
Avatar for MinoDriven minodriven
23
12k
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
250
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
Avatar for Daichi KUDO da1chi
3
1.8k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
Avatar for nrs nrslib
3
370
AIで開発生産性を上げる個人とチームの取り組み
Avatar for TaniiGo taniigo
0
130
私はどうやって技術力を上げたのか
Avatar for Yusuke Wada yusukebe
43
17k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
Avatar for Marco Roth marcoroth
3
920
CSC305 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
260
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
Avatar for uutan1108 ohmori_yusuke
0
170

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6.1k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
32
2.2k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k

Transcript

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

  2. 今⽇⽬標

  3. https://darrenyaoyao.github.io/

  4. Flex-direction column row

  5. Flex 比例 flex: 3 flex: 1

  6. justify-content

  7. align-items

  8. RWD 響應式網站 網站排版會隨著螢幕⼤⼩不同
 ⽽有所調整

  9. media query @media screen and (max-width: 900px) { .container {

    } }