1. CSS3 Flexbox &
Responsive Design
Responsive Web design Conference
Tehran, December 5, 2013
Arash Milani | arashmilani.com | ‫آرش میالنی‬

2. ‫مسالٍ دیزیىٍ آیتمَایی کٍ باید در مزکش قزار گیزود‬

3. ‫مسالٍ دیزیىٍ آیتمَایی کٍ باید در مزکش قزار گیزود‬

4. ‫مسالٍ َمیشگی مىً راَبزی يبسایت‬

5. ‫یکی اس آیتمَای مىً حذف میشًد.‬

6. ‫ياقعا سال، سال 3102 َست؟!‬

7. ‫ وحًٌی چیدمان یا‬Flexbox
‫ جدید در‬Layout Module
.‫ َست‬CSS3

8. Flexbox ‫وحًٌ ایجاد‬
.flex-container
.flex-container {
display: flex;
}

9. Flexbox ‫اجشای‬
.flex-container
flex item
.flex-container {
display: flex;
}

10. ‫‪Flex Line‬‬
‫بٍ صًرت پیشفزض ایه خط در امتداد ‪ writing mode‬است‬

11. Direction ‫ با تغییز‬Flex Line ‫تغییز جُت‬
.flex-container
.flex-container {
display: flex;
direction: rtl;
}

12. ‫محًر اصلی‬
Main Axis
Main Axis
Main Start
Main End

13. ‫محًر عمًد‬
Cross Axis
Cross Start
Cross Axis
Cross End

14. Flex Container Properties

15. Flex Container Properties
flex-direction
.flex-container
A
B
C
.flex-container {
flex-direction: row;
}

16. Flex Container Properties
flex-direction
.flex-container
C
B
A
.flex-container {
flex-direction: row-reverse;
}

17. Flex Container Properties
flex-direction
A
B
C
.flex-container {
flex-direction: column;
}

18. Flex Container Properties
flex-direction
C
B
A
.flex-container {
flex-direction: column-reverse;
}

19. Flex Container Properties
justify-content
.flex-container
A
B
C
.flex-container {
justify-content: flex-start;
}

20. Flex Container Properties
justify-content
.flex-container
A
B
C
.flex-container {
justify-content: flex-end;
}

21. Flex Container Properties
justify-content
.flex-container
A
B
C
.flex-container {
justify-content: flex-center;
}

22. Flex Container Properties
justify-content
.flex-container
A
B
C
.flex-container {
justify-content: space-between;
}

23. Flex Container Properties
justify-content
.flex-container
A
B
C
.flex-container {
justify-content: space-around;
}

24. Flex Container Properties
align-items
.flex-container
A
B
C
.flex-container {
align-items: flex-start;
}

25. Flex Container Properties
align-items
.flex-container
A
B
C
.flex-container {
align-items: flex-end;
}

26. Flex Container Properties
align-items
.flex-container
A
B
C
.flex-container {
align-items: center;
}

27. Flex Container Properties
align-items
.flex-container
A
B
C
.flex-container {
align-items: stretch;
}

28. Flex Container Properties
align-items
.flex-container
Base
line some
text here
C
.flex-container {
align-items: baseline;
}

29. Flex Container Properties
flex-wrap
.flex-container
A
B
C
D
.flex-container {
flex-wrap: no-wrap;
}
E

30. Flex Container Properties
flex-wrap
1
A
2
D
B
C
E
.flex-container {
flex-wrap: wrap;
}

31. Flex Container Properties
flex-wrap
2
D
1
A
E
B
C
.flex-container {
flex-wrap: wrap-reverse;
}

32. Flex Container Properties
align-content

33. Flex Items Properties

34. Flex Items Properties
Main Size & Cross Size
Cross Size
Main Size

35. Flex Items Properties
order
.flex-container
C
A
B
.flex-container div:last-child {
order: -1;
}

36. Flex Items Properties
margin
.flex-container
A
B
C
.flex-container div:first-child {
margin-right: auto;
}

37. Flex Items Properties
align-self
.flex-container
A
B
C
.flex-container div:first-child {
align-self: flex-end;
}

38. Flex Items Properties
flex
.flex-container div {
flex: [grow] [shrink] [basis];
flex:
1
1
0;
}

39. Flex Items Properties
flex
A
A
B
C
B
C
.flex-container div {
flex: 1 1 50px;
}

40. Flex Items Properties
flex
A
A
B
C
B
C
.flex-container div:last-child {
flex: 2;
}

41. Flex Items Properties
flex
A
A
B
C
B
C
.flex-container div {
flex: 0 1 50px;
}

42. Flex Items Properties
flex
A
B
C
A B C
.flex-container div {
flex: 1 1 50px;
}

43. Flex Items Properties
flex
A
B
C
A
B
C
.flex-container div {
flex: 1 0 50px;
}

44. Flexbox in Action

45. ‫مسالٍ دیزیىٍ آیتمَایی کٍ باید در مزکش قزار گیزود‬
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}

46. ‫مسالٍ َمیشگی مىً راَبزی يبسایت‬

47. ‫مسالٍ َمیشگی مىً راَبزی يبسایت‬
.flex-container {
display: flex;
justify-content: space-between
}

48. Responsive Menu
@media all and (max-width: 500px) {
.flex-container {
flex-direction: column;
}
}

49. Input Add-ons

50. Input Add-ons
<div class=“inputAddOn">
<input class=“inputAddOn-field“>
<button class=“inputAddOn-item”>...</button>
</div>
.inputAddOn {
display: flex;
}
.inputAddOn-field {
flex: 1;
}

51. 3 Column Layout

52. Mobile First
.wrapper {
display: flex;
flex-flow: row wrap;
}
.header, .main, .nav, .aside, .footer {
flex: 1 100%;
}

53. Mobile First

54. Larger Screens
@media all and (min-width: 800px) {
.aside { flex: 1 auto; }
.main { flex: 2 0px; }
}

55. Larger Screens