13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
20 |
--------------------------------------------------------------------------------
/small_resolution.css:
--------------------------------------------------------------------------------
1 |
2 | #menu {
3 | display: block;
4 | width: max-content;
5 | margin: auto;
6 | }
7 |
8 | #menu li {
9 | display: block;
10 | }
11 |
12 | .container {
13 | margin-top: 120px;
14 | width: 100%;
15 | }
16 |
17 | h1 {
18 | font-size: medium;
19 | }
20 |
21 | .squares {
22 | width: max-content;
23 | margin: auto;
24 | }
25 |
26 | #one {
27 | display: block;
28 | margin: 10px 5px;
29 | }
30 |
31 | #two {
32 | display: block;
33 | margin: 10px 5px;
34 | }
35 |
36 | #three {
37 | display: block;
38 | margin: 10px 5px;
39 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: rgb(210, 223, 223);
3 | }
4 |
5 | .container {
6 | margin-top: 20px;
7 | border: 2px solid #000;
8 | display: flex;
9 | flex-flow: row nowrap;
10 | align-content: space-around;
11 | }
12 |
13 | .item {
14 | flex-basis: 100px;
15 | font-size: 3em;
16 | text-align: center;
17 | height: 50px;
18 | }
19 |
20 | .container div:nth-child(1) {
21 | background-color: blue;
22 | order: 6000;
23 | flex-shrink: 3;
24 | }
25 |
26 | .container div:nth-child(2) {
27 | background-color: green;
28 | order: 2;
29 | flex: 1 3 100px;
30 | }
31 |
32 | .container div:nth-child(3) {
33 | background-color: yellow;
34 | order: 4;
35 | }
36 |
37 | .container div:nth-child(4) {
38 | background-color: rgb(57, 236, 13);
39 | order: 5;
40 | }
41 |
42 | .container div:nth-child(5) {
43 | background-color: cyan;
44 | order: -1;
45 | }
46 |
47 | .container div:nth-child(6) {
48 | background-color: pink;
49 | order: 3;
50 | }
--------------------------------------------------------------------------------