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

CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
69
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
67
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
87
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
71
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
98
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
68
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
88
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
99
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
140
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
71

Other Decks in Programming

See All in Programming
霧の中の代数的エフェクト
Avatar for funnycat funnyycat
1
350
PHPだって関数型したい 〜できること、できないこと〜 / fp-in-php
Avatar for jsoizo jsoizo
0
190
Hatena Engineer Seminar #37「言語モデルの活用に関する研究」
Avatar for SlashNephy slashnephy
0
510
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
100
アルゴリズムは何を圧縮しているのか ─ Haskell から育った「圧縮代数」というメンタルモデル
Avatar for Naoya Ito naoya
16
3.3k
継続モナドとリアクティブプログラミング
Avatar for ゆきくらげ yukikurage
3
500
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
1
170
えっ!!コードを読まずに開発を!?
Avatar for はなのうち hananouchi
0
190
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
Avatar for Manfred Steyer manfredsteyer
PRO
0
230
Prismを使った型安全な暗号化_関数型まつり2026
Avatar for _fhhmm _fhhmm
0
110
初めてのKubernetes 本番運用でハマった話
Avatar for Kobujee_53 oku053
0
120
信頼性について考えてみる（SRE NEXT 2026 miniLT）
Avatar for hayama hayama17
0
170

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
320
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
260
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
440
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
13k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
260
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
330
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.6k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
1.9k

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 {

    } }