23-CSS3 Flexbox Concepts

0
42

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here