Bubnov

396 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
396
On SlideShare
0
From Embeds
0
Number of Embeds
160
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bubnov

  1. 1. CSS Flexible Box Layout — будущее? Настоящее!
  2. 2. Две колонки 2
  3. 3. float<div class="col-1"> Колонка 1</div><div class="col-2"> Колонка 2</div> 3
  4. 4. float<div class="col-1"> .col-1, Колонка 1 .col-2 {</div> float:left;<div class="col-2"> } Колонка 2</div> 4
  5. 5. table<table> <tr> <td class="col-1"> Колонка 1 </td> <td class="col-2"> Колонка 2 </td> </tr></table> 5
  6. 6. inline-block<div class="col-1"> Колонка 1</div><div class="col-2"> Колонка 2</div> 6
  7. 7. inline-block<div class="col-1"> .col-1, Колонка 1 .col-2 {</div> display:inline-block;<div class="col-2"> } Колонка 2</div> 7
  8. 8. position<div class="col-1"> Колонка 1</div><div class="col-2"> Колонка 2</div> 8
  9. 9. position<div class="col-1"> .col-1 { Колонка 1 position:absolute;</div> left:0;<div class="col-2"> } Колонка 2</div> 9
  10. 10. position<div class="col-1"> .col-1 { Колонка 1 position:absolute;</div> left:0;<div class="col-2"> } Колонка 2 .col-2 {</div> position:absolute; right:0; } 10
  11. 11. flexКак? 11
  12. 12. CSS Flexible Box Layout 12
  13. 13. Поддержка браузерамиFirefox Opera IE WebKit[ 18 + ] [ 12.1 + ] [ 10 + ] 13
  14. 14. Поддержка браузерами Firefox Opera IE WebKit [ 18 + ] [ 12.1 + ] [ 10 + ]2009 ✔ ✘ ✘ ✔ 14
  15. 15. Поддержка браузерами Firefox Opera IE WebKit [ 18 + ] [ 12.1 + ] [ 10 + ]2009 ✔ ✘ ✘ ✔2012 ✘ ✘ ✔ ✘ 15
  16. 16. Поддержка браузерами Firefox Opera IE WebKit [ 18 + ] [ 12.1 + ] [ 10 + ]2009 ✔ ✘ ✘ ✔2012 ✘ ✘ ✔ ✘2012 + ✘ ✔ ✘ ✔ 16
  17. 17. CSS-препроцессор• SASS — http://sass-lang.com/• LESS — http://lesscss.org/• Stylus — http://learnboost.github.com/stylus/• … 17
  18. 18. 18
  19. 19. 19
  20. 20. 20
  21. 21. 21
  22. 22. 22
  23. 23. justify-content 23
  24. 24. justify-content 24
  25. 25. justify-content 25
  26. 26. justify-content 26
  27. 27. justify-content 27
  28. 28. 28
  29. 29. align-items 29
  30. 30. align-items 30
  31. 31. align-items 31
  32. 32. align-items 32
  33. 33. align-items 33
  34. 34. 34
  35. 35. orderДРУГАЯ СХЕМА 35
  36. 36. • Поэтапный процесс загрузки ключевых блоков на скриншотах, либо видео 36
  37. 37. flex<div class=”flex"> .flex { <div class="left"> display:flex; Колонка 1 } </div> <div class="right"> Колонка 2 </div></div> 37
  38. 38. Что почитать• http://bit.ly/spec-2009• http://bit.ly/spec-2012• http://bit.ly/spec-last 38
  39. 39. Ро м а н Бу б н о вРа з р а б от ч и к к л и е н т с к о й ч а с т и Гл а в н о й страницы r. b u b n o v @ c o r p . m a i l . r u 39

×