Flexbox در CSS چیست؟
به قسمتی دیگر از سری آموزشی CSS پیشرفته خوش آمدید. باید بدانید که قبل از معرفی Flexbox در css ، چهار حالت مختلف برای نمایش طرح کلی صفحه وجود داشت:
- Block برای قسمت های مختلف یک صفحه
- Inline برای متن ها
- Table (جدول) برای داده های دو بعدی جدول ها
- Positioned برای تعیین موقعیت صریح یک عنصر
اما خاصیت Flexible Box یا به اختصار Flexbox در css ، کار طراحی صفحات واکنش گرا (بدون استفاده از float و …) را بسیار آسان کرده است. پشتیبانی از این خصوصیت در مرورگرهای مختلف به این شرح است:
| کروم |
Edge |
فایرفاکس |
سافاری |
اپرا |
| 29.0 |
11.0 |
22.0 |
10 |
48 |
عناصر Flexbox
برای استفاده از مدل Flexbox باید ابتدا یک نگهدارنده (container) ایجاد کنید. به این مثال توجه کنید:
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;
background-color:DodgerBlue;
}
.flex-container > div {
background-color:#f1f1f1;
margin:10px;
padding:20px;
font-size:30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>AFlexible Layout must haveaparentelement with the<em>display</em>propertyset to<em>flex</em>.</p>
<p>Direct childelements(s)of the flexible container automatically becomes flexible items.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که در مثال می بینید برای استفاده از Flexbox باید display را برای عنصر نگهدارنده روی flex تنظیم کنیم. بدین صورت عناصر داخل آن هر کدام یک آیتم flexbox محسوب می شوند.
قبلا هم گفتیم که عنصر نگهدارنده با تنظیم display به flex وارد حالت Flexbox می شود:
|
|
.flex-container{
display:flex;
}
|
اما این تنها خصوصیت عنصر نگهدارنده (container) نیست. این عنصر دارای خصوصیات زیر نیز می باشد:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
قصد داریم تک تک این خصوصیات را بررسی کنیم.
خصوصیت flex-direction
خصوصیت flex-direction تعیین می کند که آیتم های درونش چطور کنار هم قرار بگیرند. برای روشن شدن موضوع چند مثال برای شما آورده ایم:
مثال اول – مقدار column آیتم ها را به صورت عمودی روی هم قرار می دهد:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
flex-direction:column;
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 flex-direction Property</h1>
<p>The"flex-direction: column;"stacks the flex items vertically(from top tobottom):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال دوم- مقدار column-reverse آیتم ها را به صورت عمودی روی هم قرار می دهد اما به صورت برعکس (از آیتم آخر به اول):
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
flex-direction:column-reverse;
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 flex-direction Property</h1>
<p>The"flex-direction: column-reverse;"stacks the flex items vertically(but from bottom totop):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال سوم – مقدار row آیتم ها را به صورت افقی کنار هم قرار می دهد:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
flex-direction:row;
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 flex-direction Property</h1>
<p>The"flex-direction: row;"stacks the flex items horizontally(from left toright):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال چهارم – مقدار row-reverse آیتم ها را به صورت افقی کنار هم قرار می دهد اما به صورت برعکس (از آیتم آخر به اول):
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
flex-direction:row-reverse;
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 flex-direction Property</h1>
<p>The"flex-direction: row-reverse;"stacks the flex items horizontally(but from right toleft):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت flex-wrap
خصوصیت flex-wrap می گوید که آیا آیتم های Flexbox هنگام رسیدن به پایان عرض صفحه به خط بعدی منتقل شوند و یا اندازه شان کوچک تر شود تا همگی در یک خط و کنار هم قرار بگیرند. برای درک بهتر این خصوصیت چند مثال برایتان آورده ایم. سعی کنید در هر خروجی، اندازه ی مرورگر را کوچک تر و بزرگ تر کنید (خط وسط صفحه در JSBin) تا رفتار آیتم ها را ببینید.
مثال اول – مقدار wrap آیتم ها را wrap می کند (با رسیدن به عرض صفحه، به خط بعد منتقل می شوند):
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;
flex-wrap:wrap;
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 flex-wrap Property</h1>
<p>The"flex-wrap: wrap;"specifies that the flex items will wrap ifnecessary:</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>
<p>Tryresizing the browser window.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال دوم – مقدار nowrap آیتم ها را wrap نمی کند (آیتم ها کوچک می شوند تا در یک خط جا شوند):
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;
flex-wrap:nowrap;
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 flex-wrap Property</h1>
<p>The"flex-wrap: nowrap;"specifies that the flex items will notwrap(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>
<p>Tryresizing the browser window.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال سوم – مقدار wrap-reverse آیتم ها را wrap می کند (با رسیدن به عرض صفحه، به خط بعد منتقل می شوند) اما به صورت برعکس (از آیتم آخ به اول):
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;
flex-wrap:wrap-reverse;
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 flex-wrap Property</h1>
<p>The"flex-wrap: wrap-reverse;"specifies that the flex items will wrap ifnecessary,inreverse order:</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>
<p>Tryresizing the browser window.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت flex-flow
این خصوصیت یک دستور خلاصه برای خصوصیت های flex-direction و flex-wrap می باشد. به مثال های زیر توجه کنید:
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;
flex-flow:rowwrap;
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 flex-flow Property</h1>
<p>The flex-flow propertyisashorthand propertyforthe flex-direction andthe flex-wrap properties.</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>
<p>Tryresizing the browser window.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت justify-content
خصوصیت justify-content برای ترازبندی آیتم های Flexbox استفاده می شود و مقادیر مختلفی می گیرد. من برای هر کدام از مقادیر دریافتی این خصوصیت یک مثال آورده ام:
مثال اول – مقدار 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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
justify-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 justify-content Property</h1>
<p>The"justify-content: center;"aligns the flex items at the center of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
justify-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 justify-content Property</h1>
<p>The"justify-content: flex-start;"aligns the flex items at the beginning of the container(thisisdefault):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
justify-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 justify-content Property</h1>
<p>The"justify-content: flex-end;"aligns the flex items at the endof the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
justify-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 justify-content Property</h1>
<p>The"justify-content: space-around;"displays the flex items with space before,between,andafter the lines:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال پنجم – مقدار 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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
justify-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 justify-content Property</h1>
<p>The"justify-content: space-between;"displays the flex items with space between the lines:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت align-items
خصوصیت align-items برای ترازبندی عمودی عناصر استفاده می شود. برای اینکه خاصیت align-items در مثال زیر بهتر مشخص شود به عنصر نگهدارنده ارتفاع 200 پیکسلی داده ایم و برای هر مقداری که 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
32
33
34
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:200px;
align-items: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-items Property</h1>
<p>The"align-items: center;"aligns the flex items inthe middle of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:200px;
align-items: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-items Property</h1>
<p>The"align-items: flex-start;"aligns the flex items at the top of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:200px;
align-items: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-items Property</h1>
<p>The"align-items: flex-end;"aligns the flex items at the bottom of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
height:200px;
align-items: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-items Property</h1>
<p>The"align-items: stretch;"stretches the flex items tofill the container(thisisdefault):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال پنجم – مقدار baseline که آیتم ها را بر اساس baseline متنی شان ترازبندی می کند:
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;
height:200px;
align-items:baseline;
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-items Property</h1>
<p>The"align-items: baseline;"aligns the flex items such astheir baselines aligns:</p>
<div class="flex-container">
<div><h1>1</h1></div>
<div><h6>2</h6></div>
<div><h3>3</h3></div>
<div><small>4</small></div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: Baseline متنی یعنی پایین ترین نقطه ی متن داخل یک آیتم. به تصویر زیر نگاه کنید تا مفهوم Baseline متنی برایتان روشن شود:
مفهوم Baseline متنی
در این تصویر خط قرمز، baseline متنی را مشخص می کند؛ یعنی پایین ترین قسمت متنِ آیتم ها بدون توجه به شکل آیتم.
امیدوارم از این قسمت لذت برده باشید. در قسمت بعدی خصوصیات دیگر مدل Flexbox را بررسی خواهیم کرد.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟