css3 flexbox & responsive design
DESCRIPTION
TRANSCRIPT
![Page 1: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/1.jpg)
CSS3 Flexbox &Responsive Design
Responsive Web design Conference Tehran, December 5, 2013
Arash Milani | arashmilani.com |آرش میالنی
![Page 2: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/2.jpg)
دیزیى آیتم ایی ک باید در مزکش قزار گیزود مسال
![Page 3: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/3.jpg)
دیزیى آیتم ایی ک باید در مزکش قزار گیزود مسال
![Page 4: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/4.jpg)
میشگی مى رابزی يب سایت مسال
![Page 5: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/5.jpg)
.یکی اس آیتم ای مى حذف می شد
![Page 6: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/6.jpg)
!ست؟ 2013ياقعا سال، سال
![Page 7: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/7.jpg)
Flexbox وح ی چیدمان یاLayout Module جدید در
CSS3 ست .
![Page 8: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/8.jpg)
Flexboxوح ایجاد
.flex-container {
display: flex;
}
.flex-container
![Page 9: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/9.jpg)
Flexboxاجشای
.flex-container {
display: flex;
}
.flex-container
flex item
![Page 10: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/10.jpg)
Flex Line
است writing modeب صرت پیش فزض ایه خط در امتداد
![Page 11: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/11.jpg)
Directionبا تغییز Flex Lineتغییز جت
.flex-container
.flex-container {
display: flex;
direction: rtl;
}
![Page 12: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/12.jpg)
اصلی محرMain Axis
Main Axis
Main Start Main End
![Page 13: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/13.jpg)
عمد محرCross Axis
Cross Axis
Cross Start
Cross End
![Page 14: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/14.jpg)
Flex Container Properties
![Page 15: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/15.jpg)
Flex Container Properties
flex-direction
.flex-container {
flex-direction: row;
}
.flex-container
A B C
![Page 16: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/16.jpg)
.flex-container {
flex-direction: row-reverse;
}
.flex-container
ABC
Flex Container Properties
flex-direction
![Page 17: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/17.jpg)
.flex-container {
flex-direction: column;
}
A
B
C
Flex Container Properties
flex-direction
![Page 18: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/18.jpg)
.flex-container {
flex-direction: column-reverse;
}
A
B
C
Flex Container Properties
flex-direction
![Page 19: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/19.jpg)
.flex-container {
justify-content: flex-start;
}
Flex Container Properties
justify-content
.flex-container
A B C
![Page 20: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/20.jpg)
.flex-container {
justify-content: flex-end;
}
Flex Container Properties
justify-content
.flex-container
A B C
![Page 21: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/21.jpg)
.flex-container {
justify-content: flex-center;
}
Flex Container Properties
justify-content
.flex-container
A B C
![Page 22: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/22.jpg)
.flex-container {
justify-content: space-between;
}
Flex Container Properties
justify-content
.flex-container
A B C
![Page 23: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/23.jpg)
.flex-container {
justify-content: space-around;
}
Flex Container Properties
justify-content
.flex-container
A B C
![Page 24: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/24.jpg)
Flex Container Properties
align-items
.flex-container {
align-items: flex-start;
}
.flex-container
A B C
![Page 25: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/25.jpg)
Flex Container Properties
align-items
.flex-container {
align-items: flex-end;
}
.flex-container
A B C
![Page 26: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/26.jpg)
Flex Container Properties
align-items
.flex-container {
align-items: center;
}
.flex-container
A B C
![Page 27: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/27.jpg)
Flex Container Properties
align-items
.flex-container {
align-items: stretch;
}
.flex-container
A B C
![Page 28: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/28.jpg)
Flex Container Properties
align-items
.flex-container {
align-items: baseline;
}
.flex-container
Base line some text here
C
![Page 29: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/29.jpg)
.flex-container {
flex-wrap: no-wrap;
}
Flex Container Properties
flex-wrap
.flex-container
A B C D E
![Page 30: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/30.jpg)
.flex-container {
flex-wrap: wrap;
}
Flex Container Properties
flex-wrap
A B C
D E2
1
![Page 31: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/31.jpg)
.flex-container {
flex-wrap: wrap-reverse;
}
Flex Container Properties
flex-wrap
A B C
D E2
1
![Page 32: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/32.jpg)
Flex Container Properties
align-content
![Page 33: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/33.jpg)
Flex Items Properties
![Page 34: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/34.jpg)
Flex Items Properties
Main Size & Cross Size
Main Size
Cross Size
![Page 35: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/35.jpg)
Flex Items Properties
order
.flex-container div:last-child {
order: -1;
}
.flex-container
A BC
![Page 36: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/36.jpg)
Flex Items Properties
margin
.flex-container div:first-child {
margin-right: auto;
}
.flex-container
A B C
![Page 37: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/37.jpg)
Flex Items Properties
align-self
.flex-container div:first-child {
align-self: flex-end;
}
.flex-container
AB C
![Page 38: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/38.jpg)
Flex Items Properties
flex
.flex-container div {
flex: [grow] [shrink] [basis];
flex: 1 1 0;
}
![Page 39: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/39.jpg)
Flex Items Properties
flex
.flex-container div {
flex: 1 1 50px;
}
A B C
A B C
![Page 40: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/40.jpg)
Flex Items Properties
flex
.flex-container div:last-child {
flex: 2;
}
A B C
A B C
![Page 41: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/41.jpg)
Flex Items Properties
flex
.flex-container div {
flex: 0 1 50px;
}
A B C
A B C
![Page 42: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/42.jpg)
Flex Items Properties
flex
.flex-container div {
flex: 1 1 50px;
}
A B C
A B C
![Page 43: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/43.jpg)
Flex Items Properties
flex
.flex-container div {
flex: 1 0 50px;
}
A B C
A B C
![Page 44: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/44.jpg)
Flexbox in Action
![Page 45: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/45.jpg)
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
دیزیى آیتم ایی ک باید در مزکش قزار گیزود مسال
![Page 46: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/46.jpg)
میشگی مى رابزی يب سایت مسال
![Page 47: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/47.jpg)
میشگی مى رابزی يب سایت مسال
.flex-container {
display: flex;
justify-content: space-between
}
![Page 48: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/48.jpg)
Responsive Menu
@media all and (max-width: 500px) {
.flex-container {
flex-direction: column;
}
}
![Page 49: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/49.jpg)
Input Add-ons
![Page 50: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/50.jpg)
<div class=“inputAddOn">
<input class=“inputAddOn-field“>
<button class=“inputAddOn-item”>...</button>
</div>
.inputAddOn {
display: flex;
}
.inputAddOn-field {
flex: 1;
}
Input Add-ons
![Page 51: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/51.jpg)
3 Column Layout
![Page 52: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/52.jpg)
Mobile First
.wrapper {
display: flex;
flex-flow: row wrap;
}
.header, .main, .nav, .aside, .footer {
flex: 1 100%;
}
![Page 53: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/53.jpg)
Mobile First
![Page 54: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/54.jpg)
Larger Screens
@media all and (min-width: 800px) {
.aside { flex: 1 auto; }
.main { flex: 2 0px; }
}
![Page 55: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/55.jpg)
Larger Screens
![Page 56: CSS3 Flexbox & Responsive Design](https://reader034.vdocuments.net/reader034/viewer/2022051818/54b7b0144a7959ba688b457e/html5/thumbnails/56.jpg)