به قسمت دوم آموزش کار با خاصیت Flex در CSS خوش آمدید. در قسمت قبلی تعداد زیادی از خصوصیت های Flexbox را بررسی کردیم و برای هر کدام مثال هایی زدیم. در این قسمت نیز می خواهیم با محوریت مثال ها، با خصوصیات بیشتری آشنا شویم!
خصوصیت align-content
خصوصیت align-content تنظیم کننده ی نحوه ی مرتب شدن خطوط آیتم ها است. همانطور که می دانید آیتم های Flexbox به صورت خطی کنار هم قرار می گیرند مگر اینکه ما این ترتیب را به هم بزنیم.
برای درک بهتر مسئله به عنصر نگهدارنده عرض 600 پیکسلی داده ایم و برای هر مقدار ممکن خصوصیت align-contentیک مثال زده ایم.
مثال اول – مقدار space-between که آیتم ها را با فاصله از هم قرار می دهد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:600px;
flex-wrap:wrap;
align-content:space-between;
background-color:DodgerBlue;
}
.flex-container > div {
background-color:#f1f1f1;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The"align-content: space-between;"displays the flex lines with equal space between them:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال دوم – مقدار space-around که بین آیتم ها (قبل و بعد و بینشان) فاصله می گذارد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:600px;
flex-wrap:wrap;
align-content:space-around;
background-color:DodgerBlue;
}
.flex-container > div {
background-color:#f1f1f1;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The"align-content: space-around;"displays the flex lines with space before,between,andafter them:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال سوم – مقدار stretch که مقدار پیش فرض است و آیتم ها را آنقدر میکِشد تا تمام فضای خالی را پُر کنند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:600px;
flex-wrap:wrap;
align-content:stretch;
background-color:DodgerBlue;
}
.flex-container > div {
background-color:#f1f1f1;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The"align-content: stretch;"stretches the flex lines totake up the remaining space(thisisdefault):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال چهارم – مقدار center که آیتم ها را در وسط صفحه (از نظر محور عمودی) قرار می دهد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:600px;
flex-wrap:wrap;
align-content:center;
background-color:DodgerBlue;
}
.flex-container > div {
background-color:#f1f1f1;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The"align-content: center;"displays the flex lines inthe middle of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال پنجم – مقدار flex-start که آیتم ها را در ابتدای نگهدارنده قرار می دهد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:600px;
flex-wrap:wrap;
align-content:flex-start;
background-color:DodgerBlue;
}
.flex-container > div {
background-color:#f1f1f1;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The"align-content: flex-start;"displays the flex lines at the start of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال ششم – مقدار flex-end که آیتم ها را در انتهای نگهدارنده قرار می دهد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:600px;
flex-wrap:wrap;
align-content:flex-end;
background-color:DodgerBlue;
}
.flex-container > div {
background-color:#f1f1f1;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The"align-content: flex-end;"displays the flex lines at the endof the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
وسط قرار گرفتن عمودی و افقی
اگر شما می خواهید که عنصری را دقیقا در وسط صفحه قرار دهید، هم در محور عمودی و هم در محور افقی، باید مقدارjustify-content و align-items را روی center تنظیم کنید. ما در مثال زیر همین کار را انجام داده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
justify-content:center;
align-items:center;
height:300px;
background-color:DodgerBlue;
}
.flex-container>div {
background-color:#f1f1f1;
color:white;
width:100px;
height:100px;
}
</style>
</head>
<body>
<h1>Perfect Centering</h1>
<p>Acontainer with both the justify-content andthe align-items properties set to<em>center</em>will align the item(s)inthe center(inboth axis).</p>
<div class="flex-container">
<div></div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ارث بری فرزندان از Flexbox
فرزندان مستقیم یک نگهدارنده که از نوع flexbox باشد، به صورت خودکار به آیتم های flex تبدیل می شوند و نیازی نیست که شما کاری انجام دهید. در مثال زیر چهار آیتم flexbox داریم که داخل یک نگهدارنده ی خاکستری هستند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
background-color:#f1f1f1;
}
.flex-container > div {
background-color:DodgerBlue;
color:white;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>Flexible Items</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<p>All direct children ofaflexible container becomes flexible items.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
هر کدام از این آیتم ها، خصوصیات خاصی می گیرند که در زیر لیست شده اند:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
بیایید آن ها را بررسی کنیم!
خصوصیت order
خصوصیت order ترتیب آیتم های ما را مشخص می کند؛ ممکن است اولین آیتم ای که در HTML نوشته باشیم متعلق به قسمت دیگری باشد بنابراین می توانیم با استفاده از order ترتیب آن را (بدون ویرایش HTML) تغییر دهیم. این خصوصیت تنها اعداد را به عنوان مقدار قبول می کند و مقدار پیش فرض نیز 0 است.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
align-items:stretch;
background-color:#f1f1f1;
}
.flex-container>div {
background-color:DodgerBlue;
color:white;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The order Property</h1>
<p>Usethe order propertytosort the flex items asyou like:</p>
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت flex-grow
این خصوصیت می گوید که هر آیتم نسبت به دیگر آیتم ها چقدر عرض صفحه را اشغال کند. مقداری که به flex-grow می دهید باید عدد باشد و مقدار پیش فرض نیز 0 است. در مثال زیر آیتم سوم را به نسبت 8 به 1 قرار داده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
align-items:stretch;
background-color:#f1f1f1;
}
.flex-container > div {
background-color:DodgerBlue;
color:white;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The flex-grow Property</h1>
<p>Make the third flex item grow eight times faster than the other flex items:</p>
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت flex-shrink
این خصوصیت تعیین می کند که یک آیتم نسبت به دیگر آیتم ها چقدر کوچک شود (برعکس خصوصیت flex-grow). مقدار پیش فرض این خصوصیت 1 است بنابراین 0 یعنی کمتر از بقیه کوچک شود (بزرگ تر بماند)، 1 یعنی به اندازه و نسبت بقیه ی آیتم ها کوچک شود و هر چیزی بیشتر از 1 یعنی بیشتر از بقیه ی آیتم ها کوچک شود. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
align-items:stretch;
background-color:#f1f1f1;
}
.flex-container>div {
background-color:DodgerBlue;
color:white;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The flex-shrink Property</h1>
<p>Donotlet the third flex item shrink asmuch asthe other flex items:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت flex-basis
خصوصیت flex-basis می گوید که اندازه ی اولیه ی یک آیتم چقدر باشد. به طور مثال در کد زیر مقدار <div> سوم را روی 200 پیکسل قرار داده ایم؛ یعنی مقدار اولیه ی آن 200 پیکسل باشد اما ممکن است با تغییر سایز صفحه این اندازه هم تغییر کند (اما نسبت اندازه ها حفظ می شود):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
align-items:stretch;
background-color:#f1f1f1;
}
.flex-container > div {
background-color:DodgerBlue;
color:white;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The flex-basis Property</h1>
<p>Set the initial length of the third flex item to200pixels:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis:200px">3</div>
<div>4</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت flex
این خصوصیت دستور خلاصه شده ی تمام خصوصیت های flex-grow و flex-shrink و flex-basis است. در مثال زیر آیتم ها بدون grow هستند (مقدار 0) و بدون shrink هستند (مقدار 0) و طول ابتدایی شان 200 پیکسل است:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
align-items:stretch;
background-color:#f1f1f1;
}
.flex-container>div {
background-color:DodgerBlue;
color:white;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The flex Property</h1>
<p>Make the third flex item notgrowable(0),notshrinkable(0),andwith an initial length of200pixels:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت align-self
خصوصیت align-self تراز آیتم های داخل یک نگهدارنده را مشخص می کند. در واقع دستور align-self خنثی کننده ی دستور align-items است و آن را از کار می اندازد. در دو مثال زیر برای نمایش بهتر، به نگهدارنده ارتفاع 200 پیکسلی داده ایم.
مثال اول – آیتم سوم نگهدارنده را در وسط تراز می کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:200px;
background-color:#f1f1f1;
}
.flex-container > div {
background-color:DodgerBlue;
color:white;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The align-selfProperty</h1>
<p>The"align-self: center;"aligns the selected flex item inthe middle of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
<p>The align-selfpropertyoverrides the align-items propertyof the container.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال دوم – آیتم دوم نگهدارنده را در بالا و آیتم سوم را در پایین تراز می کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:200px;
background-color:#f1f1f1;
}
.flex-container > div {
background-color:DodgerBlue;
color:white;
width:100px;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>The align-selfProperty</h1>
<p>The"align-self: flex-start;"aligns the selected flex item at the top of the container.</p>
<p>The"align-self: flex-end;"aligns the selected flex item at the bottom of the container.</p>
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
<p>The align-selfpropertyoverrides the align-items propertyof the container.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ایجاد گالری واکنش گرا با flexbox
با استفاده از مدل flexbox می توان گالری بسیار زیبایی ایجاد کرد و انواع حالت ها را به آن داد؛ به طور مثال 4 تصویر یا 2 تصویر کنار هم باشند و یا کل صفحه توسط یک تصویر اشغال شود و … . به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<!DOCTYPEhtml>
<html>
<style>
* {
box-sizing:border-box;
}
body {
margin:0;
font-family:Arial;
}
.header {
text-align:center;
padding:32px;
}
.row {
display:flex;
flex-wrap:wrap;
padding:04px;
}
/* Create four equal columns that sits next to each other */
.column {
flex:25%;
max-width:25%;
padding:04px;
}
.column img {
margin-top:8px;
vertical-align:middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
.column {
flex:50%;
max-width:50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
flex:100%;
max-width:100%;
}
}
</style>
<body>
<!--Header-->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window tosee the responsive effect.</p>
</div>
<!--Photo Grid-->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg"style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/ocean.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg"style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg"style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/ocean.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg"style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg"style="width:100%">
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ایجاد وب سایت واکنش گرا با مدل Flexbox
همانطور که گفتیم مدل flexbox استفاده های زیادی دارد که تنها محدود به ساخت یک گالری نیست، بلکه می توانیم کل وب سایت خود را با استفاده از Flexbox بسازیم! به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1">
<style>
* {
box-sizing:border-box;
}
/* Style the body */
body {
font-family:Arial;
margin:0;
}
/* Header/logo Title */
.header {
padding:60px;
text-align:center;
background:#1abc9c;
color:white;
}
/* Style the top navigation bar */
.navbar {
display:flex;
background-color:#333;
}
/* Style the navigation bar links */
.navbar a {
color:white;
padding:14px20px;
text-decoration:none;
text-align:center;
}
/* Change color on hover */
.navbar a:hover {
background-color:#ddd;
color:black;
}
/* Column container */
.row {
display:flex;
flex-wrap:wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex:30%;
background-color:#f1f1f1;
padding:20px;
}
/* Main column */
.main {
flex:70%;
background-color:white;
padding:20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color:#aaa;
width:100%;
padding:20px;
}
/* Footer */
.footer {
padding:20px;
text-align:center;
background:#ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction:column;
}
}
</style>
</head>
<body>
<!--Note-->
<div style="background:yellow;padding:5px">
<h4 style="text-align:center">Resize the browser window tosee the responsive effect.</h4>
</div>
<!--Header-->
<div class="header">
<h1>My Website</h1>
<p>Witha<b>flexible</b>layout.</p>
</div>
<!--Navigation Bar-->
<div class="navbar">
<ahref="#">Link</a>
<ahref="#">Link</a>
<ahref="#">Link</a>
<ahref="#">Link</a>
</div>
<!--The flexible grid(content)-->
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg"style="height:200px;">Image</div>
<p>Some text about me inculpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg"style="height:60px;">Image</div><br>
<div class="fakeimg"style="height:60px;">Image</div><br>
<div class="fakeimg"style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description,Dec7,2017</h5>
<div class="fakeimg"style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt inculpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description,Sep2,2017</h5>
<div class="fakeimg"style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt inculpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco.</p>
</div>
</div>
<!--Footer-->
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
امیدوارم از این قسمت لذت برده باشید. مدل Flexbox از بهترین مدل هایی است که می توان برای طراحی صفحات از آن استفاده کرد بنابراین پیشنهاد می کنیم که برای راحتی کار خودتان از این مدل بسیار کاربردی نهایت استفاده را ببرید.
چطور از فشرده ساز Winrar استفاده کنیم؟