week3-examples/flexbox.css at main · Hack4Impact-UMD/week3-examples · 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
#box-container {
  /* This turns the box-container into a flexbox */
  display: flex;

  /* Color, sizing options */
  background-color: rgb(238, 235, 235);
  min-width: 500px;
  min-height: 500px;
  padding: 10px;

  /* ====START EDITING==== */

  /* flex-direction lets you choose your main axis.
     ↕ Cross Axis ↕                             ↓ Main Axis ↓
           ▴                                          ▴
           |                                          |
           |                                          |
   ◂ ----- | ----- ▸ → Main Axis →            ◂ ----- | ----- ▸ ↔ Cross Axis ↔
           |                                          |
           |                                          |
           ▾                                          ▾
    flex-direction: row;                       flex-direction: column;
  */
  /* Default: row */
  /* Options: row, column, row-reverse, column-reverse */
  flex-direction: row;

  /* justify-content affects the distribution of elements along the main axis */
  /* Default: flex-start */
  /* Options: flex-start, center, flex-end,
              space-around, space-evenly */
  justify-content: flex-start;

  /* align-items affects the distirbution of elements along the cross axis */
  /* Default: stretch */
  /* Options: stretch, flex-start, center, flex-end, baseline */
  align-items: stretch;

  /* gap specifies the spacing between flex itmes. */
  /* Default: 0 */
  /* Common units: px, %, em, rem  */
  gap: 0;
  /* ====END EDITING  ==== */
}

#box1 {
  background-color: rgb(24, 218, 24);
  /* ====START EDITING==== */
  /* align-self is used to override the alignment of a specific element
     along the cross-axis.
     Default: auto
     Options: auto, stretch, flex-start, center, flex-end, baseline
  */
  align-self: auto;

  /* flex-grow allows an item to grow relative to others */
  /* Default: 0     */
  /* Options: 0 → ∞ */
  flex-grow: 0;

  /* flex-shrink allows an item to shrink relative to others */
  /* Default: 1 */
  flex-shrink: 0;

  /* flex-basis defines the initial size of an item before growing or shrinking */
  /* Default: auto */
  /* Options: ?px, ?rem, etc. */
  flex-basis: auto;
  /* ====END EDITING  ==== */
}

#box2 {
  background-color: rgb(214, 214, 44);
  /* ====START EDITING==== */
  align-self: auto;    /* Default: auto */
  flex-grow: 0;        /* Default: 0    */
  flex-basis: auto;    /* Default: auto */
  /* ====END EDITING  ==== */
}

#box3 {
  background-color: red;
  /* ====START EDITING==== */
  align-self: auto;    /* Default: auto */
  flex-grow: 0;        /* Default: 0    */
  flex-basis: auto;    /* Default: auto */
  /* ====END EDITING  ==== */
}

#box4 {
  background-color: rgb(27, 138, 212);
  /* ====START EDITING==== */
  align-self: auto;    /* Default: auto */
  flex-grow: 0;        /* Default: 0    */
  flex-basis: auto;    /* Default: auto */
  /* ====END EDITING  ==== */
}

html,
body {
  /* Eliminate any default margin and padding */
  margin: 0;
  padding: 0;
  /* Ensure that html and body occupy entire viewport */
  height: 100%;
  width: 100%;
}

body {
  /* Made body a flexbox to align the #box-container.
     Remember by default flex-direction is row.
  */
  display: flex;
  /* Center flexbox on main axis */
  justify-content: center;
  /* Center flexbox on cross axis */
  align-items: center;
  /* Force space between axes and  */
  gap: 30px;
}

#box-container > div {
  /* ====START EDITING==== */

  /* ====END EDITING  ==== */

  /* Neither width nor height for the boxes can go below 80px. */
  min-width: 80px;
  min-height: 80px;

  /* Stylize box labels */
  color: white;
  font-size: larger;

  /* Center number label for all divs */
  display: flex;
  justify-content: center;
  align-items: center;

}

/* Feel free to uncomment the stuff below
   for wacky box sizes */

/* #box1 > h2 {
  font-size: 50px;
}

#box2 > h2 {
  font-size: 20px;
}

#box3 > h2 {
  font-size: 44px;
}

#box4 > h2 {
  font-size: 30px;
} */