CSS-MasterClass-RoadMap/9.1_ FlexBox.html at master · Pritam-s/CSS-MasterClass-RoadMap · GitHub

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
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- <link rel="stylesheet" media="screen and (max-width:640px)" href="phone.css"> -->

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;700&display=swap" rel="stylesheet" />

    <title>Flexbox & Grid 2</title>

    <style>
        html {
            background-color: white;
        }

        body {
            font-family: "Inter", sans-serif;
        }

        .navbar ul {
            display: flex;/* Initialize the container as a flex box */

            /* Flex properties for a flex container */

            /* flex-direction: row; (Default value of flex-direction is row) */
            /* flex-direction: column;
            flex-direction: row-reverse;
            flex-direction: column-reverse; */


            /* flex-wrap: wrap; (Default value of flex-direction is no-wrap) */
            /* flex-wrap: wrap-reverse; */

            /* This is a shorthand for flex-direction: and flex-wrap: ;; */
            /* flex-flow: row-reverse wrap; */

            /* justify-content will justify the content in horizontal direction */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-evenly; */
            /* justify-content: space-around; */

            /* justify-content will justify the content in vertical direction */
            /* align-items: center; */
            /* align-items: flex-end; */
            /* align-items: flex-start; */
            /* align-items: stretch; */

            flex-direction: row;

            padding: 10px;
            justify-content:space-between;
            width: 30%;


        }

        .navbar ul li {
            list-style-type: none;

            padding-right: 20px;

            /* border: 3px solid gray; */

        }

        .navbar ul li a {
            text-decoration: none;
        }


        .container {
            border: 2px solid purple;
            padding: 5px;

            display: flex;
        }

        .box {
            border: 2px solid green;
        }

        .imgarticle{
            display: flex;
            align-items: center;

            justify-content: center;
            background-color: rgb(221, 182, 168);
        }


/* For Mobile Screens 0 to 640px */
        @media screen and (max-width:640px) {
            /* html{
    filter: invert(1) hue-rotate(180deg);
} */

            .navbar ul {
                display: flex;
                flex-direction: column;

                padding: 10px;
                justify-content:space-around;
                align-items: center;
                width: 100%;


            }

            .container {
                border: 5px solid red;

                width: 100%;

                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                /* background-color: aquamarine; */
            }

            .box {
                border: 5px solid rgb(150, 127, 255);
            }


        }
    </style>


</head>

<body>

    <header>
        <nav class="navbar">
            <ul>
                <li> <a href="#">Home</a> </li>
                <li> <a href="#">About</a> </li>
                <li> <a href="#">Services</a> </li>
                <li> <a href="#">Contact</a> </li>
            </ul>
        </nav>
    </header>
    <div class="container">
        <p class="box" id="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio inventore ipsam facere,
            culpa incidunt dolores officia maxime laboriosam animi, vero soluta praesentium?</p>
        <p class="box" id="box2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus nemo, qui veniam
            enim harum voluptate cumque sed nesciunt accusantium architecto odio cupiditate.</p>
        <p class="box" id="box3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore nihil
            magnam corporis. Explicabo culpa necessitatibus unde, consectetur commodi reiciendis voluptatum officiis?
        </p>
        <p class="box" id="box4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni eaque consequuntur
            numquam rerum natus recusandae aperiam nihil nemo accusamus! Quibusdam, sunt labore?</p>
    </div>

    <article class="imgarticle">
        <img src="https://source.unsplash.com/collection/190727/600x800" alt="">
    </article>


</body>

</html>