Embed Size (px)
DESCRIPTION
Citation preview
CSS3 Flexbox &Responsive Design
Responsive Web design Conference Tehran, December 5, 2013
Arash Milani | arashmilani.com |آرش میالنی
دیزیى آیتم ایی ک باید در مزکش قزار گیزود مسال
دیزیى آیتم ایی ک باید در مزکش قزار گیزود مسال
میشگی مى رابزی يب سایت مسال
.یکی اس آیتم ای مى حذف می شد
!ست؟ 2013ياقعا سال، سال
Flexbox وح ی چیدمان یاLayout Module جدید در
CSS3 ست .
Flexboxوح ایجاد
.flex-container {
display: flex;
}
.flex-container
Flexboxاجشای
.flex-container {
display: flex;
}
.flex-container
flex item
Flex Line
است writing modeب صرت پیش فزض ایه خط در امتداد
Directionبا تغییز Flex Lineتغییز جت
.flex-container
.flex-container {
display: flex;
direction: rtl;
}
اصلی محرMain Axis
Main Axis
Main Start Main End
عمد محرCross Axis
Cross Axis
Cross Start
Cross End
Flex Container Properties
Flex Container Properties
flex-direction
.flex-container {
flex-direction: row;
}
.flex-container
A B C
.flex-container {
flex-direction: row-reverse;
}
.flex-container
ABC
Flex Container Properties
flex-direction
.flex-container {
flex-direction: column;
}
A
B
C
Flex Container Properties
flex-direction
.flex-container {
flex-direction: column-reverse;
}
A
B
C
Flex Container Properties
flex-direction
.flex-container {
justify-content: flex-start;
}
Flex Container Properties
justify-content
.flex-container
A B C
.flex-container {
justify-content: flex-end;
}
Flex Container Properties
justify-content
.flex-container
A B C
.flex-container {
justify-content: flex-center;
}
Flex Container Properties
justify-content
.flex-container
A B C
.flex-container {
justify-content: space-between;
}
Flex Container Properties
justify-content
.flex-container
A B C
.flex-container {
justify-content: space-around;
}
Flex Container Properties
justify-content
.flex-container
A B C
Flex Container Properties
align-items
.flex-container {
align-items: flex-start;
}
.flex-container
A B C
Flex Container Properties
align-items
.flex-container {
align-items: flex-end;
}
.flex-container
A B C
Flex Container Properties
align-items
.flex-container {
align-items: center;
}
.flex-container
A B C
Flex Container Properties
align-items
.flex-container {
align-items: stretch;
}
.flex-container
A B C
Flex Container Properties
align-items
.flex-container {
align-items: baseline;
}
.flex-container
Base line some text here
C
.flex-container {
flex-wrap: no-wrap;
}
Flex Container Properties
flex-wrap
.flex-container
A B C D E
.flex-container {
flex-wrap: wrap;
}
Flex Container Properties
flex-wrap
A B C
D E2
1
.flex-container {
flex-wrap: wrap-reverse;
}
Flex Container Properties
flex-wrap
A B C
D E2
1
Flex Container Properties
align-content
Flex Items Properties
Flex Items Properties
Main Size & Cross Size
Main Size
Cross Size
Flex Items Properties
order
.flex-container div:last-child {
order: -1;
}
.flex-container
A BC
Flex Items Properties
margin
.flex-container div:first-child {
margin-right: auto;
}
.flex-container
A B C
Flex Items Properties
align-self
.flex-container div:first-child {
align-self: flex-end;
}
.flex-container
AB C
Flex Items Properties
flex
.flex-container div {
flex: [grow] [shrink] [basis];
flex: 1 1 0;
}
Flex Items Properties
flex
.flex-container div {
flex: 1 1 50px;
}
A B C
A B C
Flex Items Properties
flex
.flex-container div:last-child {
flex: 2;
}
A B C
A B C
Flex Items Properties
flex
.flex-container div {
flex: 0 1 50px;
}
A B C
A B C
Flex Items Properties
flex
.flex-container div {
flex: 1 1 50px;
}
A B C
A B C
Flex Items Properties
flex
.flex-container div {
flex: 1 0 50px;
}
A B C
A B C
Flexbox in Action
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
دیزیى آیتم ایی ک باید در مزکش قزار گیزود مسال
میشگی مى رابزی يب سایت مسال
میشگی مى رابزی يب سایت مسال
.flex-container {
display: flex;
justify-content: space-between
}
Responsive Menu
@media all and (max-width: 500px) {
.flex-container {
flex-direction: column;
}
}
Input Add-ons
<div class=“inputAddOn">
<input class=“inputAddOn-field“>
<button class=“inputAddOn-item”>...</button>
</div>
.inputAddOn {
display: flex;
}
.inputAddOn-field {
flex: 1;
}
Input Add-ons
3 Column Layout
Mobile First
.wrapper {
display: flex;
flex-flow: row wrap;
}
.header, .main, .nav, .aside, .footer {
flex: 1 100%;
}
Mobile First
Larger Screens
@media all and (min-width: 800px) {
.aside { flex: 1 auto; }
.main { flex: 2 0px; }
}
Larger Screens
![Techniques for Flexible Responsive Visualization Designidl.cs.washington.edu/files/2020-ResponsiveVis-CHI.pdf · 16]. HTML5 and CSS3 are popular standards to implement responsive](https://img.pdfslide.net/doc/110x75/5e9dce481d3f6e198e54584a/techniques-for-flexible-responsive-visualization-16-html5-and-css3-are-popular.jpg)
