/Flexbox

Self-taught CSS Flexbox

Primary LanguageHTMLThe UnlicenseUnlicense

Flexbox

Self-taught CSS Flexbox

References

https://scrimba.com/g/gflexbox

http://flexboxfroggy.com/

Dependencies

Webpack & Packages

  1. Webpack
  2. node-sass
  3. postcss-cli
  4. browser-sync

Loaders

  1. sass-loader
  2. autoprefixer

Plugins

  1. browser-sync-webpack-plugin
  2. Post CSS
  3. Extract Text Webpack Plugin
$ npm install --save-dev sass-loader node-sass webpack
$ npm install --save-dev postcss-cli autoprefixer
$ npm install --save-dev browser-sync-webpack-plugin
$ npm install --save-dev extract-text-webpack-plugin
$ npm install --save-dev postcss-loader
$ npm install --save-dev style-loader
$ npm install --save-dev babel-core
$ npm install --save-dev babel-loader
$ npm install --save-dev babel-preset-es2015
$ npm install --save-dev babel-preset-es2016
$ npm install --save-dev typescript ts-loader


$ npm install --save-dev sass-loader node-sass postcss-cli \
autoprefixer webpack browser-sync \
browser-sync-webpack-plugin

Flexbox Concepts

  • Main Axis

    • Goes from: Left => Right (depends on flex-direction)
    • display: flex;
    • flex: 1 0 0;
      • flex-grow, flex-shrink, flex-basis -flex-direction: column, row
    • justify-content:
      • flex-start, flex-end, center ...
    • flex-wrap: nowrap, wrap

  • Cross Axis

    • Goes from: Bottom => Top (depends on flex-direction)
    • align-items:
      • flex-start, flex-end, center ...
    • align-self:
      • flex-start, flex-end, center ...