CSS – 04 Flexbox

With just a few lines of code. The display blocks can load as Flex Blocks with a Flex-Direction.

When setting the parent element for Flexbox to display: flex.
The children elements will automatically align left-to-right.

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

With one line of code (flex-direction: column;) the child content now loads in columns (and not a row).

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

Flex-Direction = Row-Reverse

Using Flex-Direction to Row-Reverse the order the row content loads.

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

Flex-Direction = Column Reverse

Using Flex-Direction to Column-Reverse the order the Column content loads.

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

Flex-Direction = Justify Content

Maybe one of the most popular uses for Flex Direction. Justify Content to evenly load, or center, or set to the right or left. The Justify Content is a power layout tool.

Flex-Direction = Fix Align Items

Using the Cross Axis (top to bottom). The Fix Align Items is a powerful way to justify content and align items together.

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch (height must be set to auto).

Flex-Direction = Align Self

Align-self allows the alignment of a single item to be targeted and changed.

Flex Wrap

Flex Wrap works to fit all elements in one row. Unless the Flex Wrap property is adjusted by the following.

flex-wrap: nowrap

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

flex-wrap: wrap

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

flex-wrap: wrap-reverse

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Flex Flow

Flex flow combines to use of flex-direction and flex-wrap into the Flex Flow property.

  • flex-flow: column wrap

Align Content with Flexbox

Align Content only impacts content on the cross axis that is more than one line long using the following options.

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch

Vertically Centering with Flexbox

.parent {display:flex; align-items: center;}
CSS – 02 Fundamentals – Box Model

CSS – 02 Fundamentals – Box Model

What better way to showcase the fundamental elements of CSS than starting with the most basic tags styled with CSS.

Demonstrating the Box Model

The CSS box model is essentially a box that wraps around every HTML element.

This content of the box has 50px padding, 20px margin and a 2em tomato solid border.

It consists of:

  • DIV Background Color = Corn Blue Flower
  • Content Background Color = Azura
  • Borders = Tomato 2em
  • Padding Left = 1em
  • Margins = 20px
  • Content Width = 500px
Photography Mirco Hibiscus Bloom

Photography Mirco Hibiscus Bloom

There is something so beautiful about the Hibiscus drying bloom. The textures and tones that happen as the bloom darkens. Capturing the motion of time as each bloom (typically) stands for one-day.

As the bloom drys out a new set of values are established. Transfer to a health advantage to strengthen your immune system.