Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS_Flex_基礎二.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
October 26, 2020
Programming
77
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
76
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
96
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
79
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
110
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
78
bootstrap.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
94
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
100
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
150
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
77

Other Decks in Programming

See All in Programming
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
Avatar for Keisuke Kobayashi kobakei
0
210
setup-vp GitLab対応の裏側
Avatar for Naoki Haba naokihaba
0
160
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
120
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
34
16k
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
Avatar for kinopee kinopeee
21
21k
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
0
410
golang-bob.pdf
Avatar for Yura Iwatsuka iwatsukayura
0
100
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
450
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
940
Embedded Swiftで作る自作USBデバイス によるiOSデバイスの自動テスト / iOSDC Japan 2026 glassfiber
Avatar for glassfiber glassfiber
0
310
個人開発者よ、Honoを使え（おじさんver）
Avatar for tanahiro2010 tanahiro2010
2
140
phperだってパンチカードでコーディングしたい
Avatar for hideki kinjyo o0h
PRO
0
240

Featured

See All Featured
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
870
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
300
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
700
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
16k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.8k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.3k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
350
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
550
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
450

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 {

    } }