Skip to content

Instantly share code, notes, and snippets.

Last active May 24, 2018 20:01
What would you like to do?
RBC Frontend fundamentals - Flexbox
The properties discussed here are also described in compass:
/* Basic body style */
body {
margin: 5% 10% 20% 10%;
font-family: "Helvetica", sans-serif;
<article> contains two block-level elements.
Normally they're displayed on their own rows.
Change display to 'flex' to make them display side by side.
That's the only thing you must do to create a flexbox container!
The rest is all about customization.
article {
display: block;
/*display: flex;*/
/* Add a black border to all <section> elements */
section {
border: 2px solid #000;
padding: 5px;
This is the PARENT flexbox component. The properties here will control how all
contained components (CHILDREN) will behave.
Each property below should show up only once, but all options are included.
Un-comment specific lines to see how they change how elements are displayed!
The initially un-commented lines correspond to the standard options used when
the properties are not defined.
.parent {
display: flex; /* Makes element flexbox-capable */
flex-direction: row;
/*flex-direction: row-reverse;*/
/*flex-direction: column;*/
/*flex-direction: column-reverse;*/
justify-content: flex-start;
/*justify-content: flex-end;*/
/*justify-content: center;*/
/*justify-content: space-between;*/
/*justify-content: space-around;*/
/*justify-content: space-evenly;*/
align-items: stretch;
/*align-items: flex-start;*/
/*align-items: flex-end;*/
/*align-items: center;*/
/*align-items: baseline;*/
flex-wrap: no-wrap;
/*flex-wrap: wrap;*/
/*flex-wrap: reverse;*/
align-content: stretch;
/*align-content: flex-start;*/
/*align-content: flex-end;*/
/*align-content: center;*/
/*align-content: space-between;*/
Basic definition of our child components - they all show up as boxes.
.box {
width: 50px;
padding: 10px;
text-align: center;
border: 1px solid #000;
Now we specify properties for each individual children.
Here you can play with the following flexbox properties:
Feel free to change other properties as well: width, height, margins etc.
Note that "stretch" properties on the parent will make *all* elements the same
height when you define the height on any of the children.
The same is true for widths if you choose a vertical grid.
You can also set the widths to higher pixel values; this will allow you to play with
flex-shrink/flex-grow to test element squishiness.
.child-a {
background-color: red;
/*width: 300px;*/
.child-b {
background-color: green;
/*height: 150px;*/
.child-c {
background-color: blue;
.child-d {
background-color: purple;
<!DOCTYPE html>
<link rel="stylesheet" href="flex.css" />
<h2>I'm a title</h2>
<p>I'm a paragraph tag</p>
<!-- Our main flexbox container -->
<h3>A few elements</h3>
<section class="parent">
<div class="box child-a">A</div>
<div class="box child-b">B</div>
<div class="box child-c">C</div>
<div class="box child-d">D</div>
<!-- A busier flexbox container -->
<!-- Try playing with the flex-wrap property to see how this changes! -->
<h3>A lot of elements!</h3>
<section class="parent">
<div class="box child-a">A</div>
<div class="box child-b">B</div>
<div class="box child-c">C</div>
<div class="box child-d">D</div>
<div class="box child-b">E</div>
<div class="box child-d">F</div>
<div class="box child-b">G</div>
<div class="box child-a">H</div>
<div class="box child-c">I</div>
<div class="box child-b">J</div>
<div class="box child-a">K</div>
<div class="box child-d">L</div>
<div class="box child-c">M</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment