flexbox-example/index.html at master · coding-circle/flexbox-example · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>~*~fLeXbOx~*~</title>
    <link href="friends.css" rel="stylesheet"/>
    <style>

    .flexbox-container {
      min-height: 600px;

      display: flex;
      justify-content: space-between;
      flex-shrink: 0;

      /* align-items: center; */
      /* flex-direction: row-reverse; */
      /* flex-wrap: wrap */

      /* background-color: yellow; */
    }

    /* this means "all immediate descendent elements of an element with class 'flexbox-container'" */
    .flexbox-container > * {
      /* flex-shrink: 0; */
    }

    .normie {
      display: flex;
      justify-content: center;
      align-items: center;
      /* flex-grow: 1; */
      /* align-self: flex-end; */
    }

    </style>
  </head>
  <body>
    <article class="flexbox-container">

      <!-- one friend -->
      <div class="friend-one"></div>

      <!-- another friend -->
      <div class="friend-two"></div>

      <!-- a star .svg -->
      <svg class="star" viewBox="0 0 48 46">
        <path d="M24 0L29.6129 17.2746H47.7764L33.0818 27.9508L38.6946 45.2254L24 34.5491L9.30537 45.2254L14.9182 27.9508L0.223587 17.2746H18.3871L24 0Z" />
      </svg>

      <!-- two normies -->
      <div class="normie">Boring</div>

      <div class="normie">Snoozefest</div>

    </article>
  </body>
</html>