example-flexbox

Examples using Flexbox

https://webdesign.tutsplus.com/courses/css-flexbox-essentials

Sample Website https://codepen.io/sarn1/pen/yPWKNr

Thai Flag https://codepen.io/sarn1/pen/GOadma

Notes

• Vendor prefix - "autoprefixer" available for Brackets
• https://caniuse.com/#feat=flexbox

site01 https://codepen.io/sarn1/pen/ZaNyxb

.container {
    background-color: #555;
    width: 800px;
    height: 400px;
    margin: 0 auto;
}

.item { }

.item1 { background-color: red; }
.item2 { background-color: blue; }
.item3 { background-color: green; }
.item4 { background-color: orange; }

.container {
    background-color: #555;
    width: 800px;
    height: 400px;
    margin: 0 auto;
    display: flex; /* look */
}

.item { }

.item1 { background-color: red; }
.item2 { background-color: blue; }
.item3 { background-color: green; }
.item4 { background-color: orange; }

.container {
    background-color: #555;
    width: 800px;
    height: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.item {
    flex-basis: 150px; /* default, like width: 150px */
    flex-grow: 1; /* grows to relative to the rest of the item, thus fills parent */
}

/* shorthand of the above lines 
.item { flex: 1 1 150px; }
 */

.item1 { background-color: red; }
.item2 { background-color: blue; }
.item3 { background-color: green; }
.item4 { background-color: orange; }

site02 https://codepen.io/sarn1/pen/pdmwVo

• flex

site03 https://codepen.io/sarn1/pen/OOYgwr

• flex-direction

site04 https://codepen.io/sarn1/pen/QORgJL

• order

site05 https://codepen.io/sarn1/pen/pdmrzg

• flex-wrap

site06 https://codepen.io/sarn1/pen/xPNpRY

• flex-flow
• flex-content
  • center - centers the items
  • space-around - centers the items but have spacing on the ends
  • space-between - centers the items but not spacing on the ends
  • flex-start - flush right
  • flex-end - flush to the right

site07 https://codepen.io/sarn1/pen/mqYpvd

• Same as site06 but by row.

site08 https://codepen.io/sarn1/pen/aVrEeQ

• align-content which is similar to justify-content and it deals with column and rows.

site09 https://codepen.io/sarn1/pen/BmeYwZ

• align-items

site10 https://codepen.io/sarn1/pen/WXBMmy

• align-self