CSS-Note/Flexbox in CSS.html at main · CoderTahmid/CSS-Note · 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
/* Flexbox in CSS */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/CSS/style.css" />
    <style>
      /*
      full meaning of flexbox is
      flexible box layout
      */

      /*
      jei boro div'r bhitore thaka item gular upre ei flex property apply kora hbe,
      shei boro ba parent div ke flex container bole
      */

      /*
      ar boro div'r under e thaka child element gulo te jodi flex property apply kora hoy,
      tahole oi child element gula ke flex item bole
      */

      /*
      ei flex property chalu korar jonno container'r display: flex;
      obboshoi set kore nite hbe,
      flex item gular display flex set korle hbe na
      */

      /*
      flexbox-direction
      flexbox-direction er value 4 ta hote pare
      row(default), row-reverse, column, column-reverse
      */

      body {
        text-align: center;
      }
      div {
        border: 2px solid black;
        text-align: center;
        display: inline-block;
      }
      #container1 {
        height: 200px;
        width: 800px;
        display: flex;
        flex-direction: row;
        /*
        flex-direction: row;
        eta muloto default bhabei set kora thake,
        ekhane jeta HTML code e age lekha hoise shetai age thakbe just like default thing,
        orthat bola jay "row" set korle elemnt gula left theke niye right porjonto jabe,
        ekhane main axis hobe left theke niye right er dike
        */
      }
      #container2 {
        height: 200px;
        width: 800px;
        display: flex;
        flex-direction: row-reverse;
        /*
        ekhane dekha jacche flex-direction: row-reverse;
        set korle, main axis bora bor ba row bora bor exactly
        "row" er biporit pattern e set hbe,
        orthat bola jay "row-reverse" set korle elemnt gula right theke niye left porjonto jabe,
        ekhane main exis hobe right theke niye left'r dike
        */
      }
      #container3 {
        height: 200px;
        width: 800px;
        display: flex;
        flex-direction: column;
        /*
        flex-direction: column;
        set korle direction upre theke niye nicher dike jabe,
        ekhane main axis hbe top theke bottom'r dike
        */
      }
      #container4 {
        height: 200px;
        width: 800px;
        display: flex;
        flex-direction: column-reverse;
        /*
        flex-direction: column-reverse;
        set korle "column" set korle ja hoy
        exact tar ulta hbe,
        ekhane main axis hbe bottom theke niye top er dike
        */
      }
      #box1 {
        height: 100px;
        width: 100px;
        background-color: aqua;
      }
      #box2 {
        height: 100px;
        width: 100px;
        background-color: pink;
      }
      #box3 {
        height: 100px;
        width: 100px;
        background-color: rgb(255, 200, 0);
      }
      #box4 {
        height: 100px;
        width: 100px;
        background-color: rgb(238, 110, 110);
      }
      #box5 {
        height: 100px;
        width: 100px;
        background-color: rgb(226, 97, 226);
      }
    </style>
  </head>
  <body>
    <h1>Flexbox playground</h1>
    <div id="container1">
      container1
      <b>flex-direction: row;</b>
      <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>
    <br />
    <div id="container2">
      container2
      <b>flex-direction: row-reverse;</b>
      <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>
    <br />
    <div id="container3">
      container3
      <b>flex-direction: column;</b>
      <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>
    <br />
    <div id="container4">
      container4
      <b>flex-direction: column-reverse;</b>
      <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>