Laying out future web design with flexbox and css3


Nixon Galario / Nixon Galario
Front-End Developer

A little history



  1. 1995 Description of point 1
  2. 2009 Description of point 1
  3. 2010 Description of point 2
  4. 2011 Description of point 3
  5. 2012 Description of point 3
  6. 2016 Description of point 3


1995

Web design is not as good today


They Use HTML tables for layout

33% of users were still browsing with IE5 in mid-2003, impossible to make a tableless website that would render in IE5 properly

Mobile Wap!

Media Queries!



  1. 1995 Description of point 1
  2. 2009 Description of point 1
  3. 2010 Description of point 2
  4. 2011 Description of point 3
  5. 2012 Description of point 3
  6. 2016 Description of point 3


2009 :

Original Flexbox as working draft. Chrome and Safari has partial support uses Old syntax *box



	.flex-container {
		display : box ; /* old */
	}




  1. 1995 Description of point 1
  2. 2009 Description of point 1
  3. 2010 Description of point 2
  4. 2011 Description of point 3
  5. 2012 Description of point 3
  6. 2016 Description of point 3


2010 :

Partially supported by webkit browsers but then spec killed!

  1. 1995 Description of point 1
  2. 2009 Description of point 1
  3. 2010 Description of point 2
  4. 2011 Description of point 3
  5. 2012 Description of point 3
  6. 2016 Description of point 3


2011 :

Arrival of Flexbox Spec also known as Tweener Spec only implemented in IE10. You should avoid it if possible.




  1. 1995 Description of point 1
  2. 2009 Description of point 1
  3. 2010 Description of point 2
  4. 2011 Description of point 3
  5. 2012 Description of point 3
  6. 2016 Description of point 3


2012 :

Modern Spec Revision and it is the new hotness!, with excellent browser support




  1. 1995 Description of point 1
  2. 2009 Description of point 1
  3. 2010 Description of point 2
  4. 2011 Description of point 3
  5. 2012 Description of point 3
  6. 2016 Description of point 3


2016 and Future :

Time now and beyond!

What is Flexbox?

The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size.

Some points :

-Flexbox is Flexible! You can grow or shrink and flex to fit available space.

-Easy alignment means less Headache for accurate measurements

-Item order (not on javascript!)

- Easy syntax :D

Basics : Flexbox containers


Image credit: Flexbox Cheatsheet

Basics : Flexbox containers 



	.flex-container {
		display : flex ;
		flex-direction : row ; /* default / aligns left*/ 
	}


Basics : Flexbox containers 



	.flex-container {
		display : flex ;
		flex-direction : column ; /* default / aligns left*/ 
	}




	.flex-container {
		flex-direction : row-reverse ; /* aligns right / like float right */ 
	}



	.flex-container {
		flex-direction : column-reverse ;
	}

Flexxy Time!

Click to try!

Flexxy Time!

Flex-wrap property

wrap || wrap-reverse || nowrap



	.flex-container {
		 flex-wrap: wrap; /* nowrap || wrap-reverse */
	}

Let's do Shorthand

Flex-Flow : flex-direction || flex-wrap



	.flex-container {
		Flex-Flow : /* row wrap */
	}

Default value: row nowrap

Easily sort items!

Easily sort items! 


	.flex-item:first-child {
	  -webkit-order: /integer/; /* Safari */
	  order:         /integer/;
}

First CSS Problem?

Flexbox Power!

Vertical Centering

Insert

justify-content: center;

How to use it in Real World?

Float
Width
Clear

Float
Width
Clear

Flex item to

flex : 1 ;

Basic Layout

Flexxy Time 2!

Click to try!

More Guide Here 

	.flex-container {
	 	/*display: flex;
        flex-flow: row wrap;*/
      }
      .nav {
        /*flex: 1;*/
        /* order: 1; */
      }

      .content {
        /*flex: 4;*/
      }

      .sidebar {
        /*flex: 2;*/
      }

      .header,
      .footer {
        /*flex: 100%;*/
        text-align: center;
      }

Combine Flexbox and Media Query!


	 @media (max-width: 700px) {
        .nav {
          flex: 100%;
        }
        
        .nav li {
          display: inline;
        }
      }

      @media (max-width: 500px) {
        .content,
        .sidebar {
          flex: 100%;
        }
      }

Got a problem on buttons? with Unknown number of Items?

Height problem

display : flex ;

it gives ideal adjusting responsiveness !!

Solve it here

Summary

Flexible layouts

Distribute Extra Space

Align Content

Align Items on container or individually

Real World Example

Use it on your next project

Laying out future web design with flexbox and css3


Resource and Example : http://nixongalario.com
Email me : nixongalario@gmail.com

THE END