Advertisement
Zuma32

CSS Flex

Jul 2nd, 2025 (edited)
344
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.49 KB | Source Code | 0 0
  1. <!-- this seems to work -->
  2.  
  3.  
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <link rel="stylesheet" href="/index.css" />
  10.     <title>Document</title>
  11.     <style>
  12.        
  13.         .wrapper {
  14.             background-color: blue;
  15.             display: flex;
  16.         }
  17.  
  18.         .division1 {
  19.             background-color:red ;
  20.              width: 33.3%;
  21.         }
  22.         .division2 {
  23.             background-color:yellow ;
  24.             height: 100px;
  25.              width: 33.3%;
  26.         }
  27.         .division3 {
  28.             background-color:green ;
  29.             height: 150px;
  30.             width: 33.3%;
  31.         }
  32.  
  33.         .sub1 {
  34.             background-color: yellow;
  35.         }
  36.         .sub2 {
  37.             background-color: green;
  38.             height: 60px;
  39.         }
  40.         .sub3 {
  41.             background-color: purple;
  42.             height: 30px;
  43.         }
  44.        
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="wrapper">
  49.         <div class="division1">
  50.             division 1
  51.             <div class="sub1">
  52.                 sub 1
  53.             </div>
  54.             <div class="sub2">
  55.                 sub 1
  56.             </div>
  57.              <div class="sub3">
  58.                 sub 3
  59.             </div>
  60.         </div>
  61.         <div class="division2">
  62.             division 2
  63.         </div>
  64.         <div class="division3">
  65.             Division 3
  66.         </div>
  67.     </div>
  68. </body>
  69. </html>
Tags: css flex
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement