Flexbox ve CSS2'deki Karşılıkları

Flexbox'ın aldığı parametreler ve CSS2'deki karşılıkları nelerdir?

Transcript

1. Yıllarca Beklenen Esnek Kahraman! F L E X B O X
2. display:flex; .container
3. 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
4. Öğ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
5. 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.
6. Flex-direction
7. Flex-wrap
8. Justify-content
9. Align-items
10. Align-content
11. flex-grow, flex-shrink, align-self
12. Flex Layout (Holy Grail) http://codepen.io/team/css-tricks/pen/jqzNZq Desktop < 980px
13. 10 -ms- Edge Firefox Chrome Opera Safari Android Browser iOS Safari http://caniuse.com/#search=flex
14. 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