Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flexbox ve CSS2'deki Karşılıkları
Search
Halil İbrahim Nuroğlu
April 19, 2016
Programming
1
54
Flexbox ve CSS2'deki Karşılıkları
Flexbox'ın aldığı parametreler ve CSS2'deki karşılıkları nelerdir?
Halil İbrahim Nuroğlu
April 19, 2016
Tweet
Share
More Decks by Halil İbrahim Nuroğlu
See All by Halil İbrahim Nuroğlu
Bu İşlere Nereden Başlamalıyım?
haibnu
0
200
Other Decks in Programming
See All in Programming
Try creating your own orderedmap
kazamori
1
190
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
VS Code をプロダクトにどう取り込むか
onomax
1
710
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.1k
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
420
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
560
Elm 0.19.0 Changes
bkuhlmann
0
510
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
670
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Code Reviews
bkuhlmann
4
900
Next.js App Router
quramy
12
1.8k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Faster Mobile Websites
deanohume
300
30k
Thoughts on Productivity
jonyablonski
60
3.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Building an army of robots
kneath
300
41k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Fireside Chat
paigeccino
22
2.6k
The Invisible Customer
myddelton
114
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Transcript
Yıllarca Beklenen Esnek Kahraman! F L E X B O
X
display:flex; .container
Kapsayıcı Özellikleri. Ör; .container veya .wrap 1. display: flex ve
inline-flex 2. flex-direction : row | row-reverse | column | column-reverse 3. flex-wrap : nowrap | wrap | wrap-reverse 4. flex-flow : <flex-direction> | <flex-wrap> (kısayol) 5. justify-content : flex-start | flex-end | center | space-between | space-around 6. align-items : stretch | flex-start | flex-end | center | baseline 7. align-content : stretch | flex-start | flex-end | center | space-between | space-around Flex Özellikleri
Öğe Özellikleri; Ör: .item 1. order : <sayı> 2. flex-grow
: <sayı> 3. flex-shrink : <sayı> 4. flex-basis : <yüzde> || <değer> || initial || auto || main-size 5. flex : <’flex-grow’> <’flex-shrink’> <’flex-basis’> (kısayol) 6. align-self : auto | flex-start | flex-end | center | baseline | stretch Flex Özellikleri
En Büyük Faydaları • Responsive tasarım yaklaşımı daha kolay •
Clearfix’siz bir Layout. • Dikey de ortalama ve hizalama bu özellik ile çok kolay.
Flex-direction
Flex-wrap
Justify-content
Align-items
Align-content
flex-grow, flex-shrink, align-self
Flex Layout (Holy Grail) http://codepen.io/team/css-tricks/pen/jqzNZq Desktop < 980px
10 -ms- Edge Firefox Chrome Opera Safari Android Browser iOS
Safari http://caniuse.com/#search=flex
Kaynaklar • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ • http://flexboxfroggy.com/#tr • https://flexbox.webflow.com/ • http://kyusuf.com/post/almost-complete-guide-to-flexbox-without- flexbox
• http://flexboxgrid.com/ • http://flexboxin5.com/ • http://learnlayout.com/flexbox.html