x
1
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1">
6
<title>Bootstrap demo</title>
7
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
8
9
<style>
10
::scrollbar
11
{
12
width: 7px;
13
height: 7px;
14
}
15
::scrollbar-track
16
{
17
background: #fff;
18
}
19
::scrollbar-thumb
20
{
21
border-radius: 5px;
22
background: #2f45ff;
23
}
24
</style>
25
</head>
26
<body>
27
28
<div class="table-responsive">
29
<div class="container mt-3">
30
31
<br><br><br>
32
<p class="align-content-start flexya">.align-content-start (default):</p>
33
<div class="d-flex flex-wrap align-content-start bg-light flexya" xid="align-content-start" style="height:300px">
34
<div class="p-2 border">Flex item 1</div>
35
<div class="p-2 border">Flex item 2</div>
36
<div class="p-2 border">Flex item 3</div>
37
<div class="p-2 border">Flex item 4</div>
38
<div class="p-2 border">Flex item 5</div>
39
<div class="p-2 border">Flex item 6</div>
40
<div class="p-2 border">Flex item 7</div>
41
<div class="p-2 border">Flex item 8</div>
42
<div class="p-2 border">Flex item 9</div>
43
<div class="p-2 border">Flex item 10</div>
44
<div class="p-2 border">Flex item 11</div>
45
<div class="p-2 border">Flex item 12</div>
46
<div class="p-2 border">Flex item 13 </div>
47
<div class="p-2 border">Flex item 14</div>
48
<div class="p-2 border">Flex item 15</div>
49
<div class="p-2 border">Flex item 16</div>
50
<div class="p-2 border">Flex item 17</div>
51
<div class="p-2 border">Flex item 18</div>
52
<div class="p-2 border">Flex item 19</div>
53
<div class="p-2 border">Flex item 20</div>
54
<div class="p-2 border">Flex item 21</div>
55
<div class="p-2 border">Flex item 22</div>
56
<div class="p-2 border">Flex item 23</div>
57
<div class="p-2 border">Flex item 24</div>
58
<div class="p-2 border">Flex item 25</div>
59
</div>
60
</div>
61
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
62
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
63
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
64
</body>
65
</html>