CSS-Notes-CODES/Level4_1.html at main · SHROUDSOURAV/CSS-Notes-CODES · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning CSS Level 4</title>
    <link rel="stylesheet" href="./Level4_1.css">
</head>
<body>

    <!-- We are going to learn about Flexbox using CSS -->
    <!-- Flexbox is short for the Flexible Box Layout module. -->
    <!-- Flexbox is a layout method for arranging items in rows or columns. -->
    <!-- Flexbox makes it easier to design a flexible responsive layout structure, without using float or positioning  -->

    <!-- flex direction sets how flex items are placed in the flex container, along which axis and direction -->
    <!-- flexbox direction (default) = row (left to right) -->
    <!-- flexbox direction: row-reverse (right to left) -->
    <!-- flexbox direction: column (top to bottom) -->
    <!-- flexbox direction: column-reverse (bottom to top) -->


    <!-- justify-content: property in flexbox using CSS -->
    <!-- arranges flexitems  positions in baseline, center, end in the flexbox -->
    <!-- without changing the order of the flexitems in the flexbox -->

    <h1>Flexbox Playground</h1>
    <div id = "container">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
        <div id="box3">box3</div>
        <div id="box4">box4</div>
        <div id="box5">box5</div>
    </div>


</body>
</html>