flexbox-course/flex_container.html at master · CompuWiser/flexbox-course · 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>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Flexbox demo</title>
	<link href="_css/base.css" rel="stylesheet" type="text/css" media="screen">
	<style>
		body {
			width: 80%;
			margin: 0 auto;
			padding: 2%;
			line-height: 1.6;
		}

		.flex-container {
			margin: 1em 0;
			border: 1px solid #333;
		}
	</style>
</head>

<body>
	<header>
		<h1>Flexbox First Look</h1>
		<p>Welcome to Flexbox First Look! The <a href="http://www.w3.org/TR/css3-flexbox/" title="Flexbox">Flexible Layout Box Model</a>			(or <strong>Flexbox</strong> as it is more commonly known) is <em>just one of the many</em> CSS specifications under development
			by the W3C to address the current shortcomings in layout capabilities. Flexbox is well suited for arranging and aligning
			elements along a single axis, and creating flexible elements within a defined container. It's not particularly good at
			handling complex layouts, or controlling elements along multiple axes. As such, it's likely that Flexbox will be used
			in conjunction with other layout models such as <a href="http://www.w3.org/TR/css3-grid-layout/" title="CSS Grid Layout">CSS Grid Layout</a>.
			While layout models like Grid Layout will handle overall page organization, Flexbox will be used to control the layout
			of discreet regions or UI components.</p>
	</header>
	<article>
		<h2>Defining flex containers</h2>
		<p>To use Flexbox, you set a parent container's <strong>display</strong> property to <code>display: flex</code>. This will
			make all direction children of the parent element <strong>flex items</strong> that can be controlled through flex properties.
			To set the main axis for flex items, use the <strong>flex-direction</strong> property. To enable multi-line flex containers,
			use the <strong>flex-wrap</strong> property. To declare both, use the <strong>flex-flow</strong> shorthand.</p>
		<section class="flex-container">
			<div class="box">
				<h3>one</h3>
			</div>
			<div class="box">
				<h3>two</h3>
			</div>
			<div class="box">
				<h3>three</h3>
			</div>
			<div class="box">
				<h3>four</h3>
			</div>
		</section>
	</article>
</body>

</html>