flexbox-intro/index.html at main · developer-delta/flexbox-intro · 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
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Starter</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- elements that are display: block; by default have line breaks before and after them -->
  <h3>I'm a block heading level 3 element</h3>
  <p>I'm a block paragraph element</p>
  <div>I'm a block div element</div>
  <div>I'm also a block div element</div>
  <!-- you can ignore the horizontal rule, it's just to separate the sections<hr> -->
  <hr>

  <!-- elements that are display: inline; by default do not generate line breaks.
    they cannot have margin or padding vertically.
    They allow elements to sit next to each other. (good for text in particular) -->
  <span>I'm an inline span element</span>
  <span>I'm also an inline span</span>
  <span>I'm an inline span yet again</span>
  <a href="">I'm an inline anchor tag</a>
  <img src="" alt="I'm an inline image tag with no image url">
  <hr>

  <!-- elements that are display: inline-block; by default also don't generate line breaks,
    but can have margin and padding above and below.
    (good if you want a block element, but want them to sit next to each other) -->
  <button>I'm an inline-block button!</button>
  <input type="text" placeholder="I'm an inline-block input!">
  <hr>

  <!-- overriding an elements display property with css -->
  <span class="different1">I'm a span made to be displayed block</span>
  <div class="different2">I'm a div made to be displayed inline</div>
  <h3 class="different3">I'm a heading level 3 tag made to be displayed inline-block</h3>
  <hr>

  <!-- flexbox time! -->
  <div class="container">I'm a div displayed with flex!</div>

  <div class="container2">
    <p>I'm a p tag inside a flex div!</p>
  </div>

  <div class="container3">
    <div>we're divs in a flex div!</div>
    <div>we're divs in a flex div!</div>
    <div>we're divs in a flex div!</div>
    <div class="nested-container">
      <p>nested p's</p>
      <p>nested p's</p>
      <p>nested p's</p>
    </div>
  </div>


</body>
</html>