CodePen

HTML

            
              	<div class="flex-container">
		<div class="flex-item">1</div>
		<div class="flex-item">2</div>
		<div class="flex-item">3</div>
		<div class="flex-item">4</div>
	</div>
            
          
!

CSS

            
              		.flex-container {
			display: flex; /* I now declare this as a flex-container */
			display: -webkit-flex; /* This is the Chrome notation */
  
      min-height: 150px;
    }

		.flex-item {
      flex: 1;
      -webkit-flex: 1;
  
     /* Just some color and shape */
      background: #bbb;
      margin:5px;
      border-radius: 3px;
      border: solid 2px;
      text-align:center;
		}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................