ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

23-CSS3 Flexbox Concepts

Variable Flexbox boxes, or flexbox, can be a fresh design method in CSS3.

 

Use of flexbox ensures that things act predictably once the web page design must cater to various monitor dimensions and different show products.

 

For several applications, the varied field model has a development above the obstruct model because it not employ floats, or complete the bend container’s margins collapse while using the margins involving its material.

Example:

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .flex-container {
  6.     display: -webkit-flex;
  7.     display: flex;
  8.     width: 380px;
  9.     height: 260px;
  10.     background-color: lightblue;
  11. }
  12.  
  13. .flex-item {
  14.     background-color: black;
  15.     width: 95px;
  16.     height: 95px;
  17.     margin: 95px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22.  
  23. <div class="flex-container">
  24.   <div class="flex-item">This is the provide flex item 1</div>
  25.   <div class="flex-item"> This is the provided flex item 2</div>
  26.   <div class="flex-item"> This is the provided flex item 3</div>  
  27. </div>
  28.  
  29. </body>
  30. </html>

Another Example of creating flexboxes using floating dimension property

Example:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.     direction: rtl;
  7. }
  8.  
  9. .flex-container {
  10.     display: -webkit-flex;
  11.     display: flex;
  12.     width: 420px;
  13.     height: 280px;
  14.     background-color: lightblue;
  15. }
  16.  
  17. .flex-item {
  18.     background-color: black;
  19.     width: 110px;
  20.     height: 120px;
  21.     margin: 12px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26.  
  27. <div class="flex-container">
  28.   <div class="flex-item">this is the provided flex item 1</div>
  29.   <div class="flex-item"> this is the provided flex item 2</div>
  30. <div class=”flex-itme”>This is the provided flex item 3</div>
  31. </div>
  32.  
  33. </body>
  34. </html>
[bha size=’620×203′ variation=’01’ align=’none’]
Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!