├── README.md
├── example
├── base.css
├── flex.html
└── grid
│ ├── base.css
│ └── grid.html
└── float-vs-flex
├── images
└── logo.png
├── intro.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | [![Youtube][youtube-shield]][youtube-url]
2 | [![Facebook][facebook-shield]][facebook-url]
3 | [![Instagram][instagram-shield]][instagram-url]
4 | [![LinkedIn][linkedin-shield]][linkedin-url]
5 |
6 |
7 |
8 |
12 |
13 |
USING FLOAT
14 |
15 |
16 | Lorem Ipsum is simply dummy text of the printing and typesetting
17 | industry.
18 |
19 |
23 |
24 | Lorem Ipsum is simply dummy text of the printing and typesetting
25 | industry.
26 |
27 |
28 | Lorem Ipsum is simply dummy text of the printing and typesetting
29 | industry.
30 |
31 |
32 |
33 |
34 |
USING FLEXBOX
35 |
36 |
37 | Lorem Ipsum is simply dummy text of the printing and typesetting
38 | industry.
39 |
40 |
41 | Lorem Ipsum is simply dummy text of the printing and typesetting
42 | industry. Lorem Ipsum is simply dummy text of the printing and
43 | typesetting industry. Lorem Ipsum is simply dummy text of the printing
44 | and typesetting industry.
45 |
46 |
47 | Lorem Ipsum is simply dummy text of the printing and typesetting
48 | industry.
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/float-vs-flex/style.css:
--------------------------------------------------------------------------------
1 | @import "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap";
2 |
3 | * {
4 | box-sizing: border-box;
5 | margin: 0;
6 | padding: 0;
7 | }
8 |
9 | body {
10 | font-family: "Montserrat", sans-serif;
11 | font-size: 0.8rem;
12 | }
13 |
14 | .container {
15 | max-width: 450px;
16 | margin: 2rem auto;
17 | padding: 0.5rem;
18 | }
19 |
20 | img {
21 | width: 100px;
22 | float: left;
23 | }
24 |
25 | h2 {
26 | font-weight: bold;
27 | }
28 |
29 | main {
30 | background-color: skyblue;
31 | padding: 0.5rem;
32 | border: 1px solid #666;
33 | /* overflow: auto; */
34 | }
35 |
36 | section:first-of-type {
37 | background-color: thistle;
38 | padding: 0.5rem;
39 | border: 1px solid #666;
40 | }
41 |
42 | section:last-of-type {
43 | background-color: turquoise;
44 | padding: 0.5rem;
45 | border: 1px solid #666;
46 | }
47 |
48 | /* float */
49 | .float {
50 | margin: 1rem 0 2rem;
51 | overflow: auto;
52 | }
53 |
54 | .float section:first-of-type {
55 | float: left;
56 | width: 50%;
57 | }
58 |
59 | .float section:last-of-type {
60 | float: right;
61 | width: 50%;
62 | }
63 |
64 | /* flex */
65 | .flexbox {
66 | margin: 1rem 0 2rem;
67 | display: flex;
68 | flex-flow: row wrap;
69 | justify-content: space-between;
70 | }
71 |
72 | .flexbox > main {
73 | flex-basis: 100%;
74 | }
75 |
76 | .flexbox section {
77 | flex-basis: 50%;
78 | flex-grow: 1;
79 | }
80 |
--------------------------------------------------------------------------------