مدل Flex در بوت استرپ ۴

          برنامه نویس 
            بازدید : 34
          دوشنبه 24 تیر 1398
           نظرات (0)
        

Flex تفاوت اصلی بوت استرپ 3 و 4

شما می توانید برای کنترل محیط و طرح کلی صفحات وب خود از کلاس های Flex در بوت استرپ 4 استفاده کنید. شاید بتوان گفت مهم ترین تفاوت بوت استرپ 3 و بوت استرپ 4 این است که بوت استرپ 4 به جای float ها از مدل flexbox استفاده می کند، چرا که مدل flexbox در طراحی های زیبا و واکنش گرا بسیار بهتر و ساده تر از Float می باشد. ما مدل flexbox را در دوره ی آموزش CSS پیشرفته بررسی کرده ایم، برای اطلاعات بیشتر به آن سری بزنید.

برای ایجاد نگهدارنده ی Flex و تبدیل فرزندان مستقیم آن به آیتم های flex از کلاس d-flex استفاده کنید. مثال:

 



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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Flex</h2>
  <p>Tocreateaflexbox container andtransform direct children into flex items,usethed-flex class:</p>
  <div class="d-flex p-3 bg-secondary text-white">  
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

اگر می خواهید این نگهدارنده را inline کنید می توانید از کلاس d-inline-flex استفاده کنید:

 



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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Inline Flex</h2>
  <p>Tocreate an inline flexbox container,usethed-inline-flex class:</p>
  <div class="d-inline-flex p-3 bg-secondary text-white">  
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

با بررسی این مثال و مثال قبلی متوجه می شوید که عنصر نگهدارنده دیگر تمام عرض را اشغال نکرده بلکه تنها دور عناصر داخل خودش را گرفته است.

نمایش افقی

برای نمایش آیتم های flex به صورت افقی (یعنی کنار هم) از کلاس flex-row. استفاده می کنیم که حالت پیش فرض نیز می باشد. البته اگر با ترتیب این آیتم ها مشکل داشتید می توانید با کلاس flex-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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Horizontal Direction</h2>
  <p>Use.flex-row tomake the flex items appear side by side(default):</p>
  <div class="d-flex flex-row bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
  <p>Use.flex-row-reverse toright-align the direction:</p>
  <div class="d-flex flex-row-reverse bg-secondary">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

نمایش عمودی

برخی اوقات به دلیل زیبایی یا نیاز طرح خود باید عناصر را روی هم قرار دهیم؛ در چنین مواقعی می توان از کلاس flex-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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Vertical Direction</h2>
  <p>Use.flex-column todisplay the flex items vertically(on top of eachother):</p>
  <div class="d-flex flex-column mb-3">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
  <p>Use.flex-column-reverse toreverse the vertical direction:</p>
  <div class="d-flex flex-column-reverse">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

مشخصا کلاس flex-column-reverse. نیز مانند مورد قبلی قابل استفاده است.

تراز بندی (justify) محتوا

کلاس های خانواده ی *-justify-content. می توانند ترازبندی آیتم های Flex در بوت استرپ را تغییر دهند. برای کار با این کلاس ها باید یکی از مقادیر زیر را به جای علامت ستاره قرار دهید:

start (به معنی «ابتدا»)
end (به معنی «انتها»)
center (به معنی «وسط»)
between (به معنی «میان» یا «بین»)
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
45

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Justify content</h2>
  <p>Usethe.justify-content-*classes tochange the alignment of flex items.Choose from start(default),end,center,between oraround:</p>
  <div class="d-flex justify-content-start bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
  <div class="d-flex justify-content-end bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
  <div class="d-flex justify-content-center bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
  <div class="d-flex justify-content-between bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
  <div class="d-flex justify-content-around bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

عرض برابر

اگر می خواهید عرض آیتم های flex با یکدیگر برابر باشد کلاس flex-fill. به درد شما می خورد:

 



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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Fill/Equal Widths</h2>
  <p>Use.flex-fill on flex items toforce them into equal widths:</p>
  <div class="d-flex mb-3">
    <div class="p-2 flex-fill bg-info">Flex item1</div>
    <div class="p-2 flex-fill bg-warning">Flex item2</div>
    <div class="p-2 flex-fill bg-primary">Flex item3</div>
  </div>
  <p>Example without.flex-fill:</p>
  <div class="d-flex mb-3 bg-secondary">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

دستور grow

کلاس flex-grow-1. به هر عنصری اضافه شود، به آن می گوید که بقیه ی فضا را اشغال کند. در مثال زیر دو آیتم اول تنها به اندازه ی خودشان فضا را اشغال کرده اند اما آیتم سوم که دستور flex-grow-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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Grow</h2>
  <p>Use.flex-grow-1onaflex item totake up the rest of the space:</p>
  <div class="d-flex mb-3">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 flex-grow-1 bg-primary">Flex item3</div>
  </div>
  <p>Example without.flex-grow-1:</p>
  <div class="d-flex mb-3 bg-secondary">
    <div class="p-2 bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

نکته: کلاس flex-shrink-1. دقیقا بر خلاف کلاس flex-grow-1. است و آیتم را در صورت نیاز کوچک تر می کند.

تغییر ترتیب آیتم ها

اگر می خواهید ترتیب ظاهری عناصر داخل نگهدارنده را تغییر دهید باید از کلاس های خانواده ی order. استفاده کنید. این کلاس ها از 0 تا 12 هستند به طوری که کمترین عدد بیشترین اولویت را دارد (یعنی order-1 قبل از order-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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Order</h2>
  <p>Change the visual order ofaspecific flex item(s)with the.order classes.Valid classes are from0to12:</p>
  <div class="d-flex mb-3">
    <div class="p-2 order-3 bg-info">Flex item1</div>
    <div class="p-2 order-2 bg-warning">Flex item2</div>
    <div class="p-2 order-1 bg-primary">Flex item3</div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

تنظیم خودکار margin

شما می توانید با کلاس mr-auto. به سمت راست عنصر margin auto اضافه کنید (حرکت عنصر به سمت راست) و با کلاس ml-auto. دقیقا برعکس این کار را (یعنی اضافه کردن margin به سمت چپ) انجام دهید. مثال:

 



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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Auto Margins</h2>
  <p>Easily add auto margins toflex items with.mr-auto(push items tothe right),orby using.ml-auto(push items tothe left):</p>
  <div class="d-flex mb-3 bg-secondary">
    <div class="p-2 mr-auto bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 bg-primary">Flex item3</div>
  </div>
  <div class="d-flex mb-3 bg-secondary">
    <div class="p-2  bg-info">Flex item1</div>
    <div class="p-2 bg-warning">Flex item2</div>
    <div class="p-2 ml-auto bg-primary">Flex item3</div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

قابلیت wrap

ما می توانیم با استفاده از کلاس های flex-nowrap. (حالت پیش فرض)، flex-wrap. و flex-wrap-reverse.نحوه ی wrap شدن آیتم های flex را در نگهدارنده کنترل کنیم. wrap شدن یعنی اگر آیتم ها از عرض صفحه بزرگتر بودند بشکنند و به خط بعدی بروند. بنابراین در صورتی که nowrap را قرار دهید آیتم ها فقط و فقط در یک خط قرار گرفته تا جایی که از صفحه خارج می شوند!

تفاوت این سه کلاس را در مثال زیر می بینید:

 



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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Wrap</h2>
  <p>Control how flex items wrap inaflex container with.flex-nowrap(default),.flex-wrap or.flex-wrap-reverse.</p>
  <p><code>.flex-wrap:</code></p>
  <div class="d-flex flex-wrap bg-light">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
    <div class="p-2 border">Flex item4</div>
    <div class="p-2 border">Flex item5</div>
    <div class="p-2 border">Flex item6</div>
    <div class="p-2 border">Flex item7</div>
    <div class="p-2 border">Flex item8</div>
    <div class="p-2 border">Flex item9</div>
    <div class="p-2 border">Flex item10</div>
    <div class="p-2 border">Flex item11</div>
    <div class="p-2 border">Flex item12</div>
    <div class="p-2 border">Flex item13</div>
    <div class="p-2 border">Flex item14</div>
    <div class="p-2 border">Flex item15</div>
    <div class="p-2 border">Flex item16</div>
    <div class="p-2 border">Flex item17</div>
    <div class="p-2 border">Flex item18</div>
    <div class="p-2 border">Flex item19</div>
    <div class="p-2 border">Flex item20</div>
    <div class="p-2 border">Flex item21</div>
    <div class="p-2 border">Flex item22</div>
    <div class="p-2 border">Flex item23</div>
    <div class="p-2 border">Flex item24</div>
    <div class="p-2 border">Flex item25</div>
  </div>
  <br>
  <p><code>.flex-wrap-reverse:</code></p>
  <div class="d-flex flex-wrap-reverse bg-light">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
    <div class="p-2 border">Flex item4</div>
    <div class="p-2 border">Flex item5</div>
    <div class="p-2 border">Flex item6</div>
    <div class="p-2 border">Flex item7</div>
    <div class="p-2 border">Flex item8</div>
    <div class="p-2 border">Flex item9</div>
    <div class="p-2 border">Flex item10</div>
    <div class="p-2 border">Flex item11</div>
    <div class="p-2 border">Flex item12</div>
    <div class="p-2 border">Flex item13</div>
    <div class="p-2 border">Flex item14</div>
    <div class="p-2 border">Flex item15</div>
    <div class="p-2 border">Flex item16</div>
    <div class="p-2 border">Flex item17</div>
    <div class="p-2 border">Flex item18</div>
    <div class="p-2 border">Flex item19</div>
    <div class="p-2 border">Flex item20</div>
    <div class="p-2 border">Flex item21</div>
    <div class="p-2 border">Flex item22</div>
    <div class="p-2 border">Flex item23</div>
    <div class="p-2 border">Flex item24</div>
    <div class="p-2 border">Flex item25</div>
  </div>
  <br>
  <p><code>.flex-nowrap:</code></p>
  <div class="d-flex flex-nowrap bg-light">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
    <div class="p-2 border">Flex item4</div>
    <div class="p-2 border">Flex item5</div>
    <div class="p-2 border">Flex item6</div>
    <div class="p-2 border">Flex item7</div>
    <div class="p-2 border">Flex item8</div>
    <div class="p-2 border">Flex item9</div>
    <div class="p-2 border">Flex item10</div>
    <div class="p-2 border">Flex item11</div>
    <div class="p-2 border">Flex item12</div>
    <div class="p-2 border">Flex item13</div>
    <div class="p-2 border">Flex item14</div>
    <div class="p-2 border">Flex item15</div>
    <div class="p-2 border">Flex item16</div>
    <div class="p-2 border">Flex item17</div>
    <div class="p-2 border">Flex item18</div>
    <div class="p-2 border">Flex item19</div>
    <div class="p-2 border">Flex item20</div>
    <div class="p-2 border">Flex item21</div>
    <div class="p-2 border">Flex item22</div>
    <div class="p-2 border">Flex item23</div>
    <div class="p-2 border">Flex item24</div>
    <div class="p-2 border">Flex item25</div>
    <div class="p-2 border">Flex item26</div>
    <div class="p-2 border">Flex item27</div>
    <div class="p-2 border">Flex item28</div>
    <div class="p-2 border">Flex item29</div>
    <div class="p-2 border">Flex item30</div>
    <div class="p-2 border">Flex item31</div>
    <div class="p-2 border">Flex item32</div>
    <div class="p-2 border">Flex item33</div>
    <div class="p-2 border">Flex item34</div>
    <div class="p-2 border">Flex item35</div>
  </div>
  <br>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

تراز عمودی آیتم های جمعی

می توانید با استفاده از کلاس های خانواده ی *-align-content. آیتم های flex جمعی را تراز کنید. توجه داشته باشید که این کلاس ها هیچ تاثیری بر روی تک ردیف های flex ندارند بلکه باید گروهی از آیتم ها جمع شده باشند. این کلاس ها عبارت اند از:

align-content-start. (حالت پیش فرض)
align-content-end.
align-content-center.
align-content-between.
align-content-around.
align-content-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
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Align Content</h2>
  <p>Control the vertical alignment of gathered flex items with the.align-content-*classes.</p>
  <p><strong>Note:</strong>Thisexample does notlook good onasmall devices.Also note that these classes have no effect on single rows of flex items.</p>
  <p>.align-content-start(default):</p>
  <div class="d-flex flex-wrap align-content-start bg-light"style="height:300px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
    <div class="p-2 border">Flex item4</div>
    <div class="p-2 border">Flex item5</div>
    <div class="p-2 border">Flex item6</div>
    <div class="p-2 border">Flex item7</div>
    <div class="p-2 border">Flex item8</div>
    <div class="p-2 border">Flex item9</div>
    <div class="p-2 border">Flex item10</div>
    <div class="p-2 border">Flex item11</div>
    <div class="p-2 border">Flex item12</div>
    <div class="p-2 border">Flex item13</div>
    <div class="p-2 border">Flex item14</div>
    <div class="p-2 border">Flex item15</div>
    <div class="p-2 border">Flex item16</div>
    <div class="p-2 border">Flex item17</div>
    <div class="p-2 border">Flex item18</div>
    <div class="p-2 border">Flex item19</div>
    <div class="p-2 border">Flex item20</div>
    <div class="p-2 border">Flex item21</div>
    <div class="p-2 border">Flex item22</div>
    <div class="p-2 border">Flex item23</div>
    <div class="p-2 border">Flex item24</div>
    <div class="p-2 border">Flex item25</div>
  </div>
  <br>
  <p>.align-content-end:</p>
  <div class="d-flex flex-wrap align-content-end bg-light"style="height:300px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
    <div class="p-2 border">Flex item4</div>
    <div class="p-2 border">Flex item5</div>
    <div class="p-2 border">Flex item6</div>
    <div class="p-2 border">Flex item7</div>
    <div class="p-2 border">Flex item8</div>
    <div class="p-2 border">Flex item9</div>
    <div class="p-2 border">Flex item10</div>
    <div class="p-2 border">Flex item11</div>
    <div class="p-2 border">Flex item12</div>
    <div class="p-2 border">Flex item13</div>
    <div class="p-2 border">Flex item14</div>
    <div class="p-2 border">Flex item15</div>
    <div class="p-2 border">Flex item16</div>
    <div class="p-2 border">Flex item17</div>
    <div class="p-2 border">Flex item18</div>
    <div class="p-2 border">Flex item19</div>
    <div class="p-2 border">Flex item20</div>
    <div class="p-2 border">Flex item21</div>
    <div class="p-2 border">Flex item22</div>
    <div class="p-2 border">Flex item23</div>
    <div class="p-2 border">Flex item24</div>
    <div class="p-2 border">Flex item25</div>
  </div>
  <br>
  <p>.align-content-center:</p>
  <div class="d-flex flex-wrap align-content-center bg-light"style="height:300px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
    <div class="p-2 border">Flex item4</div>
    <div class="p-2 border">Flex item5</div>
    <div class="p-2 border">Flex item6</div>
    <div class="p-2 border">Flex item7</div>
    <div class="p-2 border">Flex item8</div>
    <div class="p-2 border">Flex item9</div>
    <div class="p-2 border">Flex item10</div>
    <div class="p-2 border">Flex item11</div>
    <div class="p-2 border">Flex item12</div>
    <div class="p-2 border">Flex item13</div>
    <div class="p-2 border">Flex item14</div>
    <div class="p-2 border">Flex item15</div>
    <div class="p-2 border">Flex item16</div>
    <div class="p-2 border">Flex item17</div>
    <div class="p-2 border">Flex item18</div>
    <div class="p-2 border">Flex item19</div>
    <div class="p-2 border">Flex item20</div>
    <div class="p-2 border">Flex item21</div>
    <div class="p-2 border">Flex item22</div>
    <div class="p-2 border">Flex item23</div>
    <div class="p-2 border">Flex item24</div>
    <div class="p-2 border">Flex item25</div>
  </div>
  <br>
  <p>.align-content-around:</p>
  <div class="d-flex flex-wrap align-content-around bg-light"style="height:300px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
    <div class="p-2 border">Flex item4</div>
    <div class="p-2 border">Flex item5</div>
    <div class="p-2 border">Flex item6</div>
    <div class="p-2 border">Flex item7</div>
    <div class="p-2 border">Flex item8</div>
    <div class="p-2 border">Flex item9</div>
    <div class="p-2 border">Flex item10</div>
    <div class="p-2 border">Flex item11</div>
    <div class="p-2 border">Flex item12</div>
    <div class="p-2 border">Flex item13</div>
    <div class="p-2 border">Flex item14</div>
    <div class="p-2 border">Flex item15</div>
    <div class="p-2 border">Flex item16</div>
    <div class="p-2 border">Flex item17</div>
    <div class="p-2 border">Flex item18</div>
    <div class="p-2 border">Flex item19</div>
    <div class="p-2 border">Flex item20</div>
    <div class="p-2 border">Flex item21</div>
    <div class="p-2 border">Flex item22</div>
    <div class="p-2 border">Flex item23</div>
    <div class="p-2 border">Flex item24</div>
    <div class="p-2 border">Flex item25</div>
  </div>
  <br>
  <p>.align-content-stretch:</p>
  <div class="d-flex flex-wrap align-content-stretch bg-light"style="height:300px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
    <div class="p-2 border">Flex item4</div>
    <div class="p-2 border">Flex item5</div>
    <div class="p-2 border">Flex item6</div>
    <div class="p-2 border">Flex item7</div>
    <div class="p-2 border">Flex item8</div>
    <div class="p-2 border">Flex item9</div>
    <div class="p-2 border">Flex item10</div>
    <div class="p-2 border">Flex item11</div>
    <div class="p-2 border">Flex item12</div>
    <div class="p-2 border">Flex item13</div>
    <div class="p-2 border">Flex item14</div>
    <div class="p-2 border">Flex item15</div>
    <div class="p-2 border">Flex item16</div>
    <div class="p-2 border">Flex item17</div>
    <div class="p-2 border">Flex item18</div>
    <div class="p-2 border">Flex item19</div>
    <div class="p-2 border">Flex item20</div>
    <div class="p-2 border">Flex item21</div>
    <div class="p-2 border">Flex item22</div>
    <div class="p-2 border">Flex item23</div>
    <div class="p-2 border">Flex item24</div>
    <div class="p-2 border">Flex item25</div>
  </div>
  <br>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

تراز عمودی تک ردیف ها

اگر تنها یک ردیف از آیتم های flex را دارید می توانید با کلاس های خانواده ی *-align-items. آن ها را ترازبندی کنید. این کلاس ها عبارت اند از:

align-items-start.
align-items-end.
align-items-center.
align-items-baseline.
align-items-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
45
46
47
48
49
50
51
52
53
54
55

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Align Items</h2>
  <p>Control the vertical alignment of single rows of flex items with the.align-content-*classes.</p>
  <p>.align-items-start:</p>
  <div class="d-flex align-items-start bg-light"style="height:150px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
  </div>
  <br>
  <p>.align-items-end:</p>
  <div class="d-flex align-items-end bg-light"style="height:150px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
  </div>
  <br>
  <p>.align-items-center:</p>
  <div class="d-flex align-items-center bg-light"style="height:150px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
  </div>
  <br>
  <p>.align-items-baseline:</p>
  <div class="d-flex align-items-baseline bg-light"style="height:150px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
  </div>
  <br>
  <p>.align-items-stretch(default):</p>
  <div class="d-flex align-items-stretch bg-light"style="height:150px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
  </div>
  <br>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

تراز عمودی آیتم ها به صورت جداگانه

اگر می خواهید تنها یک آیتم را ترازبندی کنید باید از کلاس های خانواده ی *-align-self. استفاده کنید. این کلاس ها عبارت اند از:

align-self-start.
align-self-end.
align-self-center.
align-self-baseline.
align-self-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
45
46
47
48
49
50
51
52
53
54
55

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>Align Self</h2>
  <p>Control the vertical alignment ofaspecific flex item with the.align-self-*classes.</p>
  <p>.align-self-start:</p>
  <div class="d-flex bg-light"style="height:150px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border align-self-start">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
  </div>
  <br>
  <p>.align-self-end:</p>
  <div class="d-flex bg-light"style="height:150px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border align-self-end">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
  </div>
  <br>
  <p>.align-self-center:</p>
  <div class="d-flex bg-light"style="height:150px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border align-self-center">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
  </div>
  <br>
  <p>.align-self-baseline:</p>
  <div class="d-flex bg-light"style="height:150px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border align-self-baseline">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
  </div>
  <br>
  <p>.align-self-stretch(default):</p>
  <div class="d-flex bg-light"style="height:150px">
    <div class="p-2 border">Flex item1</div>
    <div class="p-2 border align-self-stretch">Flex item2</div>
    <div class="p-2 border">Flex item3</div>
  </div>
  <br>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

کلاس های واکنش گرا

تمام کلاس هایی که تا الان به شما توضیح دادیم، نسخه ی واکنشگرایی نیز دارند. ما از هر خانواده یک مثال می زنیم و بقیه ی دستورها برای شما مشخص می شوند:

کلاس خانواده	مثال
Flex Container (گروه اول – ایجاد نگهدارنده)	`.d--inline-flex` `.d--flex`
Direction (گروه دوم – نمایش افقی و عمودی عناصر)	`.flex--row` `.flex--row-reverse` `.flex-*-column`
Justified Content (گروه سوم – ترازبندی افقی آیتم ها)	`.justify-content--start` `.justify-content--between`
Equal Width (گروه چهارم – هم عرض شدن آیتم ها)	`.flex-*-fill`
Grow (گروه پنجم – اشغال فضای باقی مانده)	`.flex--grow-0` `.flex--grow-1`
Shrink (گروه ششم – کوچک کردن آیتم ها)	`.flex--shrink-0` `.flex--shrink-1`
Order (گروه هفتم – تعیین ترتیب آیتم ها)	`.order-*-0-12`
Wrap (گروه هشتم – wrap کردن آیتم ها)	`.flex--wrap` `.flex--nowrap`
Align Content (گروه نهم – ترازبندی عمودی آیتم های گروهی)	`.align-content--start` `.align-content--around`
Align Items (گروه دهم – ترازبندی عمودی تک ردیف ها)	`.align-items--start` `.align-items--baseline`
Align Self (گروه یازدهم – ترازبندی عمودی تک آیتم ها)	`.align-self--start` `.align-self--stretch`

شما می توانید برای مشاهده ی مثال های بیشتر و کسب اطلاعات بیشتر به صفحه ی رسمی سایت بوت استرپ مراجعه کنید.

منبع: روکسو