Advertisement
Guest User

Untitled

a guest
Mar 27th, 2017
50
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.79 KB | None | 0 0
  1. <div class="flex-container">
  2. <div class="flex-item1"></div>
  3. <div class="flex-item2"></div>
  4. <div class="flex-item3"></div>
  5. </div>
  6.  
  7. * {
  8. margin: 0;
  9. }
  10.  
  11. .flex-container {
  12. display: flex;
  13. height: 300px;
  14. flex-wrap: wrap;
  15. border: 1px solid blue;
  16. background-color: gray;
  17. align-content: flex-start;
  18. }
  19.  
  20. .flex-item1 {
  21. width: 100%;
  22. height: 10px;
  23. background: yellow;
  24. }
  25.  
  26. .flex-item2 {
  27. width: 100%;
  28. height: 10px;
  29. border: 1px solid red;
  30. background: red;
  31. }
  32.  
  33. .flex-item3 {
  34. width: 100%;
  35. border: 3px solid purple;
  36. background: purple;
  37. align-self: stretch;
  38. height: auto;
  39. }
  40.  
  41.  
  42. /* another attempt for the third child div */
  43. /* .flex-item3{
  44. width: 100%;
  45. border: 3px solid purple;
  46. background: purple;
  47. flex-direction: row;
  48. flex-grow: 1;
  49. } */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement