-
Notifications
You must be signed in to change notification settings - Fork 0
/
flex.html
49 lines (47 loc) · 1.92 KB
/
flex.html
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
<html>
<head>
<title>Flex</title>
<style>
ul{
background-color: gray;
display: flex;
}
.main{
display: flex;
flex-wrap: wrap;
}
.sub{
height: 200px;
width: 200px;
background-color: blueviolet;
margin: 0.5%;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Contact</li>
<li>Help</li>
<li>Services</li>
</ul>
<div class="main">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit aut, dolorum autem laudantium molestias quo nemo aliquid cum debitis distinctio, praesentium, id libero iusto dicta. Ratione consequatur soluta saepe, necessitatibus quo totam, dolores quibusdam sit voluptatem natus obcaecati. Officiis voluptates soluta harum sequi possimus ducimus, itaque impedit, cum ullam suscipit sit tenetur, reiciendis quasi rem nisi corporis atque excepturi. Iusto tempora sint minus sed saepe laborum laudantium eveniet pariatur, assumenda neque ex dolores vero tempore nam sequi minima dolore sit, culpa debitis accusamus dignissimos optio totam. Ex culpa aut quae accusamus necessitatibus ullam blanditiis similique, non vel dolorum, deserunt eligendi.</p>
</body>
</html>