[!] [=title "Week 8: Flexbox 1"] [=content-]

Finally, the oft-teased flexbox arrives! We're not covering all of flexbox in part 1 (there's a LOT), but we'll go over some basic properties and the rough idea.

Flexbox is the clever answer to positioning being hard. Rather than having to use terrible absolute positioning tricks, flexboxes generalize to almost every hard problem - centering, space distribution, automatic reflow (e.g. stacking vertically when screens are too small for horizontal), etc, and you can do all of this without JavaScript. This is the simplest flexbox:

    <style>
    span {
    	background-color: red;
    	padding: 5px;
    }

    #container {
    	display: flex;
    }
    </style>
    <div id="container">
    	<span> Text 1 </span>
    	<span> Text 2 </span>
    	<span> Text 3 </span>
    </div>

Produces:

Text 1 Text 2 Text 3

Note the `display: flex;` - that div is a flexbox! That's all it takes. Unfortunately, this also isn't very useful. Let's make it more interesting with the `justify-content` property:

    <style>
    span {
    	background-color: red;
    	padding: 5px;
    }

    #container {
    	display: flex;
    	justify-content: center;
    }
    </style>
    <div id="container">
    	<span> Text 1 </span>
    	<span> Text 2 </span>
    	<span> Text 3 </span>
    </div>

Produces:

Text 1 Text 2 Text 3

Nice, fully centered. What about spacing?

    <style>
    span {
    	background-color: red;
    	padding: 5px;
    }

    #container {
    	display: flex;
    	justify-content: space-evenly;
    }
    </style>
    <div id="container">
    	<span> Text 1 </span>
    	<span> Text 2 </span>
    	<span> Text 3 </span>
    </div>

Produces:

Text 1 Text 2 Text 3

Useful! Note how hard it would be to produce this effect without using flexbox. There are a few other properties for `justify-content`, all of which are listed on MDN.

I hope you can see how powerful flexbox is. We're past the point where you know enough to start building websites, so now it's time to start thinking about designing websites- flexbox is going to be one of the most effective tools in your arsenal. I would highly recommend practicing on your own!

There is a LOT more to flexbox, which we'll be covering over the next few weeks; you can get ahead by reading the CSS-Tricks guide to Flexbox. While it's advanced, it's a good reference.

[/] [#template.html]