Flexbox explained

            
              // a code summary of this great post: 
// https://css-tricks.com/snippets/css/a-guide-to-flexbox/

////////////////////////////
// the flex container:
///////////////////////////

.container {
  // 1. context: this kickstarts a flex context for its direct children: the items
  display:flex; /* or inline-flex for inline containers*/
	
// 2. flex-direction: the horizontal direction of the items: left to right, right to left, column, column reverse.
  // 2. flex-direction: row | row-reverse | column | column-reverse;
  flex-direction:row;
	
  // 3. flex-wrap: nowrap | wrap | wrap-reverse;
  // flex items will all try to fit onto one line. You can change that
  // if you use wrap, the items need a declared width or min/max-width
  flex-wrap: wrap;
	
  // these last two's shorthand is:
  //flex-flow: <‘flex-direction’> || <‘flex-wrap’>
  flex-flow: row wrap;
	
	// 	IMPORTANT! the following values have inverted behaviour depending on the flex direction: row or column.
	
	// 3. justify-content: extra free horizontal space? decide how to distribute it. this has sense with pixel widths of the items or with widths/min/max-widths that don't totally cover the container
  // justify-content: flex-start | flex-end | center | space-between | space-around;
  justify-content: space-between;
  
  // 4. align-items: extra vertical space between the flex children? manage how to align them.
  //align-items: flex-start | flex-end | center | baseline | stretch;
  align-items: stretch;
	
  // 5. align-content: when the container has an height, this aligns ALL the items vertically, as if they were a single block: top, bottom, center etc. toggle the next two comments to see it in action
   // align-content: flex-start | flex-end | center | baseline | stretch;
   // height:100%;
   // align-content: stretch;
}

////////////////////////////
// the flex items:
///////////////////////////

.card {
  
  // 1. flex grow: This defines the ability for a flex item to grow horizontally if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others
    flex-grow: 0; // default!
  
  // 2. flex-basis: This defines the default size of an element before the remaining space is distributed. can substitute the "width"
	flex-basis: 32%;
	
// 3. flex-shrink: it's like flex-grow but for vertical space
// flex-shrink: 1; // default!
	flex-shrink:0;
  
  // 4. the shorthand for these last 3 values: flex: none | <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> - It is recommended that you use this shorthand property rather than set the individual properties. The short hand sets the other values intelligently.
	
  flex: 0 0 32%;
  
  &.flex-grow {
    //the last card
   flex-grow:0.5;
  }
	
  &.flex-align-self {
    // 5. align-self: auto | flex-start | flex-end | center | baseline | stretch;
    //This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. this works when the flex container has an height. It's about VERTICAL remaining space only. to move an item horizontally use margins
    //align-self:center;
	  margin:auto;
  }
}

// items order:
// order: number;
// you can specify the order of each children, despite their position in the DOM. uncomment to see it in action:
	
	/*
	.card-1 {
		order:4;
	}*/
	
	/*
	.card-2 {
		order:3;
	}*/

	/*
	.card-3 {
		order:2;
	}*/
	
	/*
	.card-4 {
		order:1;
	}*/

/* =================================================================== */
/* =================================================================== */
// resources + nice to know
/* =================================================================== */
/* =================================================================== */

// common flexbugs and workarounds: https://github.com/philipwalton/flexbugs
// common flexbugs solving automated: https://github.com/luisrudge/postcss-flexbugs-fixes
// use autoprefixer when working with flexbox to make your life easier with previous flexbox implementations
// this article is great: https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b
// this answer is great: https://stackoverflow.com/questions/42613359/how-does-flex-wrap-work-with-align-self-align-items-and-align-content
// understanding flexbox with gifs: https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35
// remember that: a flex item can also be a flex container!

/* =================================================================== */
/* =================================================================== */
// cosmetic demo styles
/* =================================================================== */
/* =================================================================== */

* {
  box-sizing:border-box;
}
html,body {
  height: 100%;
}
body {
  background: #999;  
}

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px 0;
}

.card {
  background: #fff;
  box-shadow:0 0 10px rgba(0,0,0,.5);
  padding: 20px;
  margin-bottom: 2%;
}

.card-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-size:24px;
  line-height: 1.5;
  text-transform: uppercase;
  font-weight: bold;
}