forked from mdn/css-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (92 loc) · 5.45 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox Examples</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Flexbox Examples</h1>
<p>These examples are to accompany the Flexbox articles on MDN.</p>
<h2>Basic concepts of flexbox</h2>
<ol>
<li><a href="basics/the-flex-container.html">The flex container</a></li>
<li><a href="basics/flex-direction.html">The flex-direction property</a></li>
<li><a href="basics/flex-wrap.html">Multi-line flex containers</a></li>
<li><a href="basics/flex-flow.html">The flex-flow shorthand</a></li>
<li><a href="basics/flex-properties.html">The flex properties</a></li>
<li><a href="basics/flex-shorthands.html">Flex shorthands</a></li>
<li><a href="basics/align-items.html">Align items</a></li>
<li><a href="basics/justify-content.html">Justify content</a></li>
</ol>
<h2>Relationship to other layout methods</h2>
<ol>
<li><a href="relationship/writing-modes.html">Writing Modes</a></li>
<li><a href="relationship/floats.html">Floated layout</a></li>
<li><a href="relationship/flex-layout.html">Simple flex layout</a></li>
<li><a href="relationship/grid-layout.html">Simple grid layout</a></li>
<li><a href="relationship/display-contents.html">Demo of display: contents</a></li>
</ol>
<h2>Alignment</h2>
<ol>
<li><a href="alignment/intro.html">Centering a box</a></li>
<li><a href="alignment/align-items.html">Alignment on the cross axis with align-items</a></li>
<li><a href="alignment/align-self.html">Aligning individual items with align-self</a></li>
<li><a href="alignment/align-self-column.html">Changing the main axis to column and aligning items</a></li>
<li><a href="alignment/align-content.html">Aligning content on the cross axis</a></li>
<li><a href="alignment/align-content-column.html">Changing the main axis to column</a></li>
<li><a href="alignment/justify-content.html">Main axis alignment with justify-content</a></li>
<li><a href="alignment/justify-content-column.html">Main axis alignment with flex-direction column</a></li>
<li><a href="alignment/justify-content-writing-mode.html">Main axis alignment in RTL writing mode</a></li>
<li><a href="alignment/justify-content-reverse.html">Main axis alignment with reversed row</a></li>
<li><a href="alignment/auto-margins.html">Alignment with auto margins</a></li>
</ol>
<h2>Order</h2>
<ol>
<li><a href="order/flex-direction.html">The flex-direction property</a></li>
<li><a href="order/order.html">The order property</a></li>
<li><a href="order/negative-order.html">Using negative values for order</a></li>
<li><a href="order/usecase-order.html">A usecase for the order property</a></li>
</ol>
<h2>Ratios on the main axis</h2>
<ol>
<li><a href="ratios/min-max-content.html">Concepts of min and max-content</a></li>
<li><a href="ratios/flex-basis.html">The flex-basis property</a></li>
<li><a href="ratios/flex-grow.html">The flex-grow property</a></li>
<li><a href="ratios/flex-grow-ratios.html">Ratios and the flex-grow property</a></li>
<li><a href="ratios/flex-shrink.html">The flex-shrink property</a></li>
<li><a href="ratios/flex-shrink-min-content.html">min-content sizing and the flex-shrink property</a></li>
<li><a href="ratios/flex-shrink-ratios.html">Ratios and the flex-shrink property</a></li>
</ol>
<h2>Mastering wrapping of flex items</h2>
<ol>
<li><a href="wrapping/row-wrap.html">Wrapping when flex-direction is row</a></li>
<li><a href="wrapping/column-wrap.html">Wrapping when flex-direction is column</a></li>
<li><a href="wrapping/row-reverse-wrap.html">Wrapping when flex-direction is row-reverse</a></li>
<li><a href="wrapping/grid-example.html">Grid and two-dimensions</a></li>
<li><a href="wrapping/flex-grid.html">A flexbox grid</a></li>
<li><a href="wrapping/gaps.html">Gaps between flex items</a></li>
<li><a href="wrapping/visibility-collapse.html">Setting an item to visibility: collapse</a></li>
<li><a href="wrapping/wrapped-visibility-collapse.html">Wrapped items with visibility: collapse</a></li>
</ol>
<h2>Common Use Cases of Flexbox</h2>
<ol>
<li><a href="use-cases/navigation.html">Navigation</a></li>
<li><a href="use-cases/navigation-flex.html">Navigation distributing space to items</a></li>
<li><a href="use-cases/navigation-split.html">Split navigation</a></li>
<li><a href="use-cases/center.html">Centering an item</a></li>
<li><a href="use-cases/cards.html">Card layout</a></li>
<li><a href="use-cases/media.html">Media object</a></li>
<li><a href="use-cases/media-flipped.html">Flipped media object</a></li>
<li><a href="use-cases/input-button.html">Input element and button</a></li>
<li><a href="use-cases/label-input-button.html">Adding a label to the input and button</a></li>
</ol>
<h2>Backwards compatibility of flexbox</h2>
<ol>
<li><a href="browsers/float.html">With floats as a fallback</a></li>
<li><a href="browsers/inline-block.html">With inline-block as a fallback</a></li>
<li><a href="browsers/table-cell.html">With table-cell as a fallback</a></li>
<li><a href="browsers/vertical-align.html">With the vertical-align property as a fallback for alignment</a></li>
</ol>
</body>
</html>