Everything you ever wanted to know about Flexbox

everything-you-ever-wanted-to-know-about-flexbox.markdown

Everything you ever wanted to know about Flexbox

A Pen by Vincent Tang on CodePen.

License.

index.pug

.corridor
  h1 CENTERING
  p Below is what the test-case boxes look like, with added top and bottom red colored border for visual reference
  p Because it gets distracting, I omitted this and kept a left / right border to indicate what the testing-box looks like
  p Play around the width on screen to see results of flexbox properties
  h3 One Element Centered
  .test-case-h100(style='border-top:3px dotted red; border-bottom:3px dotted red')
    .s-dad.a-items-center(style='justify-content: center')
      .s-kid Part 1
      
///////////////////////////////////////////
//Justify-content: center, spacearound, space-evenly, flex-end, flex-start
///////////////////////////////////////////
.corridor
  h1 JUSTIFY-CONTENT
  p Flex-start is default
  hr
  h3 Justify-content: Centered
  .test-case-h100
    .s-dad.a-items-center(style='justify-content:center')
      .s-kid A
      .s-kid B
      .s-kid C
      .s-kid D
      .s-kid E
  h3 Justify-content: Space-Around
  .test-case-h100
    .s-dad.a-items-center(style='justify-content:space-around')
      .s-kid A
      .s-kid B
      .s-kid C
      .s-kid D
      .s-kid E
  h3 Justify-content: Space-Evenly
  .test-case-h100
    .s-dad.a-items-center(style='justify-content:space-evenly')
      .s-kid A
      .s-kid B
      .s-kid C
      .s-kid D
      .s-kid E
  h3 Justify-content: Flex-End
  .test-case-h100
    .s-dad.a-items-center(style='justify-content:flex-end')
      .s-kid A
      .s-kid B
      .s-kid C
      .s-kid D
      .s-kid E
  h3 Justify-content: Flex-Start
  .test-case-h100
    .s-dad.a-items-center(style='justify-content:flex-start')
      .s-kid A
      .s-kid B
      .s-kid C
      .s-kid D
      .s-kid E
///////////////////////////////////////////
// Wrap, No Wrap, Wrap-Reverse
///////////////////////////////////////////

.corridor
  h1 WRAP
  p nowrap is default
  hr
  h3 flex-wrap: wrap
  .test-case-h150
    .f-dad.a-items-center.j-space-around(style='flex-wrap: wrap')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 flex-wrap: wrap-reverse
  .test-case-h150
    .f-dad.a-items-center.j-space-around(style='flex-wrap: wrap-reverse')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 flex-wrap: no-wrap
  .test-case-h150
    .f-dad.a-items-center.j-space-around(style='flex-wrap: no-wrap')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E

///////////////////////////////////////////
// Flex - Grow
///////////////////////////////////////////
.corridor
  h1 FLEX GROW
  p Flex GRows default value is 0
  p Flex grow is based on fractions. A,B,C,D,E respectively is 0+0+0+0+0 = 0 for default shrink values. 
  p If A→0, B→1, C→1, 0+1+2+0+0 = 3
  hr
  h3 Flex Grow 0 → B
  .test-case-h100
    .s-dad.a-items-center.j-space-center
      .s-kid 0-gA
      .s-kid(style="flex-grow:0") 0-gB
      .s-kid 0-gC
      .s-kid 0-gD
      .s-kid 0-gE
  h3 Flex Grow 1 → B
  .test-case-h100
    .s-dad.a-items-center.j-space-center
      .s-kid 0-gA
      .s-kid(style="flex-grow:1") 1-gB
      .s-kid 0-gC
      .s-kid 0-gD
      .s-kid 0-gE
  h3 Flex Grow 2 → B
  .test-case-h100
    .s-dad.a-items-center.j-space-center
      .s-kid 0-gA
      .s-kid(style="flex-grow:2") 2-gB
      .s-kid 0-gC
      .s-kid 0-gD
      .s-kid 0-gE
  h3 Flex Grow 1 → A, 2 → B
  .test-case-h100
    .s-dad.a-items-center.j-space-center
      .s-kid(style="flex-grow:1") 1-gA
      .s-kid(style="flex-grow:2") 2-gB
      .s-kid 0-gC
      .s-kid 0-gD
      .s-kid 0-gE
  h3 Flex Grow 0→A, 1→B, 2→C
  .test-case-h100
    .s-dad.a-items-center.j-space-center
      .s-kid(style="flex-grow:0") 0-gA
      .s-kid(style="flex-grow:1") 1-gB
      .s-kid(style="flex-grow:2") 2-gC
      .s-kid 0-gD
      .s-kid 0-gE

///////////////////////////////////////////
// Flex-Shrink
///////////////////////////////////////////
.corridor
  h1 FLEX SHRINK
  p Flex Shrinks Default value is 1
  p Flex Shrink is based on fractions. A,B,C,D,E respectively is 1+1+1+1+1 = 5 for default shrink values. 
  p If A=1, B=2, 1+2+1+1+1=6
  hr
  h3 Flex shrink 0 on B
  .test-case-h100
    .f-dad.a-items-center.j-space-center
      .f-kid 1-sA
      .f-kid(style="flex-shrink:0") 1-sB
      .f-kid 1-sC
      .f-kid 1-sD
      .f-kid 1-sE
  h3 Flex shrink 1 on B
  .test-case-h100
    .f-dad.a-items-center.j-space-center
      .f-kid 1-sA
      .f-kid(style="flex-shrink:1") 1-sB
      .f-kid 1-sC
      .f-kid 1-sD
      .f-kid 1-sE
  h3 Flex shrink 2 on B
  .test-case-h100
    .f-dad.a-items-center.j-space-center
      .f-kid 1-sA
      .f-kid(style="flex-shrink:2") 2-sB
      .f-kid 1-sC
      .f-kid 1-sD
      .f-kid 1-sE
  h3 Flex shrink 1→A, 2→B
  .test-case-h100
    .f-dad.a-items-center.j-space-center
      .f-kid(style="flex-shrink:1") 1-sA
      .f-kid(style="flex-shrink:2") 2-sB
      .f-kid 1-sC
      .f-kid 1-sD
      .f-kid 1-sE
  h3 Flex shrink 0→A, 1→B, 2→C
  .test-case-h100
    .f-dad.a-items-center.j-space-center
      .f-kid(style="flex-shrink:0") 0-sA
      .f-kid(style="flex-shrink:1") 1-sB
      .f-kid(style="flex-shrink:2") 2-sC
      .f-kid 1-sD
      .f-kid 1-sE

///////////////////////////////////////////
// Order Test
///////////////////////////////////////////
.corridor
  h1 ORDER
  p Order Default value is 0
  p Values range from -1 to 9
  p Priority from Left to Right is as follows
  p RULE-1: Lowest order goes left first
  p RULE-2: If order values are same, left most element goes left
  hr
  h3 Flex order 0 on B
  .test-case-h100
    .s-dad.a-items-center.j-space-center
      .s-kid 0-oA
      .s-kid(style="order:0") 0-oB
      .s-kid 0-oC
      .s-kid 0-oD
      .s-kid 0-oE
  h3 Flex order 1 on B
  .test-case-h100
    .s-dad.a-items-center.j-space-center
      .s-kid 0-oA
      .s-kid(style="Order:1") 1-oB
      .s-kid 0-oC
      .s-kid 0-oD
      .s-kid 0-oE
  h3 Flex order -1 on B
  .test-case-h100
    .s-dad.a-items-center.j-space-center
      .s-kid 0-oA
      .s-kid(style="Order:-1") -1_oB
      .s-kid 0-oC
      .s-kid 0-oD
      .s-kid 0-oE
  h3 Flex order 1→A, 2→B, 1→C
  .test-case-h100
    .s-dad.a-items-center.j-space-center
      .s-kid(style="Order:1") 1-oA
      .s-kid(style="Order:2") 2-oB
      .s-kid(style="Order:1") 1-oC
      .s-kid 0-oD
      .s-kid 0-oE
  h3 Flex order 0→A, 1→B, 2→C
  .test-case-h100
    .s-dad.a-items-center.j-space-center
      .s-kid(style="Order:0") 0-oA
      .s-kid(style="Order:1") 1-oB
      .s-kid(style="Order:2") 2-oC
      .s-kid 0-oD
      .s-kid 0-oE

.vertical-banner-alert
  p THINGS AFFECTED BY VERTICAL CONTENT BELOW
  //- img(src='https://discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif')
      

///////////////////////////////////////////
///////////////////////////////////////////
// Vertical Aligning Elements Below
///////////////////////////////////////////
///////////////////////////////////////////


///////////////////////////////////////////
// Flex Basis
///////////////////////////////////////////

.corridor
  h1 Vertical Stuff Below
  p
    | All of the above code used 
    code align-items: center;
  p
    | To explore horizontal properties. Below code scenarios will use 
    code justify-content: center;
  P as a control group
  p Below each testing container is 250px height
  .test-case-h250(style='border-top:3px dotted red; border-bottom:3px dotted red')
    .s-dad.a-items-center(style='justify-content: center')
      .s-kid Part 2

.corridor
  h1 ALIGN-ITEMS
  p align-items: stretch is default
  hr
  h3 align-items: stretch;
  .test-case-h100
    .f-dad.j-space-center(style='align-items: stretch;')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: flex-start;
  .test-case-h100
    .f-dad.j-space-center(style='align-items: flex-start;')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: flex-end
  .test-case-h100
    .f-dad.j-space-center(style='align-items: flex-end')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: center
  .test-case-h100
    .f-dad.j-space-center(style='align-items: center')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: space-between
  .test-case-h100
    .f-dad.j-space-center(style='align-items: space-between')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: space-around
  .test-case-h100
    .f-dad.j-space-center(style='align-items: space-around')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E

///////////////////////////////////////////
// Align-Items, with Flex-Direction: Column
///////////////////////////////////////////
.corridor
  h1 ALIGN-ITEMS
  p align-items: stretch is default
  hr
  h3 align-items: stretch;
  .test-case-h450
    .f-dad.flex-direction-column.j-space-center(style='align-items: stretch;')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: flex-start;
  .test-case-h450
    .f-dad.flex-direction-column.j-space-center(style='align-items: flex-start;')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: flex-end
  .test-case-h450
    .f-dad.flex-direction-column.j-space-center(style='align-items: flex-end')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: center
  .test-case-h450
    .f-dad.flex-direction-column.j-space-center(style='align-items: center')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: space-between
  .test-case-h450
    .f-dad.flex-direction-column.j-space-center(style='align-items: space-between')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: space-around
  .test-case-h450
    .f-dad.flex-direction-column.j-space-center(style='align-items: space-around')
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
      
///////////////////////////////////////////
// Align-Items, with Flex-Direction: Column and Justify-content
///////////////////////////////////////////
.corridor
  h1 ALIGN-ITEMS
  p align-items: stretch is default
  hr
  h3 align-items: stretch; j-flex-start
  .test-case-h450
    .f-dad.flex-direction-column.j-flex-start
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: flex-start; j-flex-end
  .test-case-h450
    .f-dad.flex-direction-column.j-flex-end
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: flex-end , j-space-center
  .test-case-h450
    .f-dad.flex-direction-column.j-space-center
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: center, .j-space-between
  .test-case-h450
    .f-dad.flex-direction-column.j-space-between
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: space-between , .j-space-around
  .test-case-h450
    .f-dad.flex-direction-column.j-space-around
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
  h3 align-items: space-around
  .test-case-h450
    .f-dad.flex-direction-column.j-space-center
      .f-kid A
      .f-kid B
      .f-kid C
      .f-kid D
      .f-kid E
      
p im not done yet.
p TODO - add 3 column fix with .S-kid instead, so easier to view vertical diff.
p Use column left for reference next to item.
p Use a grid-based system as reference.
p Build the reference later

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

/* 
 * Author: Vincent Tang
 * Description: Practicing with Flexbox Scenarios
 * Date Started:  !(11/27/2017 20:45)
 * Sources: http://cssreference.io/flexbox/
 */

/* ================================== */
/* Block/Element - BEM/SMACSS naming*/
/* ================================== */

.f-dad,
.s-dad {
  height: 100%;
  display: flex;
}

/* S-Kid is skinny dude in neighborhood */
.s-kid {
  width: 50px;
  height: 20px;
  border: 3px solid green;
  padding: 5px;
  background-color: #0FFF3C; /* darker green*/
  text-align: center; /* centers inline text horizontally */
  line-height: 20px; /* centers inline text vertically same width */
}

/* F-Kid is Fat Boi*/
.f-kid {
  @extend .s-kid;
  width: 200px;
}


/*==================================*/
/* VERTICAL SPECIFIC Modifier/Skins - BEM/SMACSS Naming*/
/*==================================*/

/*----------------------------------*/
/* Align Content (✿ ♥‿♥) */
/*----------------------------------*/
.a-content-stretch {   /* ◆ */
  align-content: stretch;
}
.a-content-flex-start {
  align-content: flex-start;
}
.a-content-flex-end {
  align-content: flex-end;
}
.a-content-center {
  align-content: center;/*★*/
}
.a-content-space-between{
  align-content: space-between;
}
.a-content-stretch {
  align-content: space-around;
}

/*----------------------------------*/
/* Align Items ❚█══█❚ */
/*----------------------------------*/
.a-items-flex-start {
  align-items: flex-start;
}
.a-items-flex-end {
  align-items: flex-end;
}
.a-items-center {
  align-items: center;/*★*/
}
.a-items-baseline{
  align-items: baseline;
}
.a-items-stretch {
  align-items: stretch;
}

/*----------------------------------*/
/* ALIGN SELF ┣▇▇▇═─ */
/*----------------------------------*/
.a-self-auto {
  align-self: flex-auto;
}
.a-self-flex-start {
  align-self: flex-start;
}
.a-self-flex-end {
  align-self: flex-end;
}
.a-self-center {
  align-self: center;/*★*/
}
.a-self-baseline{
  align-self: baseline;
}
.a-self-stretch {
  align-self: stretch;
}

/*==================================*/
/* EVERYTHING ELSE Modifier/Skins - BEM/SMACSS Naming*/
/*==================================*/

/*----------------------------------*/
/* Justify-Content ╚(▲_▲)╝ */
/*----------------------------------*/
.j-flex-start{
  justify-content: flex-start;
}
.j-flex-end{
  justify-content: flex-end;
}
.j-space-center {
  justify-content: center; /*★*/
}
.j-space-between{
  justify-content: space-between;
}
.j-space-around{
  justify-content: space-around; /*★*/
}

/*----------------------------------*/
/* Flex Basis ♞▀▄▀▄♝▀▄ */
/*----------------------------------*/
.flex-basis-auto{
  flex-basis: auto;
}
.flex-basis-80{
  flex-basis: 80px;
}


/*----------------------------------*/
/* Flex Direction (⌐■_■)–︻╦╤─ – – – */
/*----------------------------------*/
.flex-direction-row {
  flex-direction: row;
}
.flex-direction-row-reverse {
  flex-direction: row-reverse;
}
.flex-direction-column {
  flex-direction: column;
}
.flex-direction-column-reverse {
  flex-direction: column-reverse;
}




/*==================================*/
/*==================================*/
/*==================================*/
/*==================================*/
/*==================================*/
/*==================================*/
/*==================================*/
/* A,B,C,D,E individual boxes , ROY G BIV rainbow coloration*/
/*==================================*/
.s-kid:nth-of-type(1),
.f-kid:nth-of-type(1){
  background-color: #FF7878;
}
.s-kid:nth-of-type(2),
.f-kid:nth-of-type(2){
  background-color: orange;
}
.s-kid:nth-of-type(3),
.f-kid:nth-of-type(3){
  background-color: yellow;
}
.s-kid:nth-of-type(4),
.f-kid:nth-of-type(4){
  background-color: lightgreen;
}
.s-kid:nth-of-type(5),
.f-kid:nth-of-type(5){
  background-color: lightblue;
}

/*==================================*/
/* Playpen Test Box */
/*==================================*/

.test-case-h100 {
  height: 100px;
  border-left: 5px solid red;
  border-right: 5px solid red;
}

.test-case-h150 {
  @extend .test-case-h100;
  height: 150px;
}
.test-case-h450 {
  @extend .test-case-h100;
  height: 450px;
}


/*==================================*/
/* Global Styles */
/*==================================*/

body{
  padding: 10px;
  font-family: Helvetica, Arial, sans-serif;
}
hr {
  display: block;
  width: 100%;
  border: 1px dashed darkblue;
}
h1,
h3,
p {
  text-align: center;
}
.corridor:nth-of-type(odd){
  margin: 20px;
  padding: 10px;
  background-color: lightgrey;
}
.corridor:nth-of-type(even) {
  margin: 20px;
  padding: 10px;
  background-color: rgb(240, 240, 230); /* washed out yellow */
}
code {
  color: blue;
}
.vertical-banner-alert {
  width: 100%;
  height: 300px;
  background-color: yellow;
  
  text-align: center;
  line-height: 300px;
  
  font-size: 30px;
  font-weight: bold;
  
  overflow: hidden; /*hides overflow from lineheight with responsiveness*/
}
.float-left-vertical {
  width: 200px;
  height: 250px;
}