misael_arc

membuat tabel presisi dengan flex

Nov 22nd, 2020
1,366
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.17 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <title>Misael</title>
  4. <head>
  5. <style type="text/css">
  6. .flex-container {
  7.     padding: 0;
  8.     margin: 0;
  9.     list-style: none;
  10.     display: -webkit-box;
  11.     display: -moz-box;
  12.     display: -ms-flexbox;
  13.     display: -moz-flex;
  14.     display: -webkit-flex;
  15.     display: flex;
  16.  
  17.     -webkit-flex-flow: row wrap;
  18.     flex-flow: row wrap;
  19. }
  20.  
  21. .flex-item {
  22.     background: red;
  23.     width: 200px;
  24.     height: 200px;
  25.     margin: 20px;
  26.     text-align: center;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31.  
  32.             <ul class="flex-container">
  33.                 <li class="flex-item">
  34.                     <h1>TEST</h1>
  35.                 </li>
  36.                 <li class="flex-item">
  37.                     <h1>TEST</h1>
  38.                 </li>
  39.                 <li class="flex-item">
  40.                     <h1>TEST</h1>
  41.                 </li>
  42.                 <li class="flex-item">
  43.                     <h1>TEST</h1>
  44.                 </li>
  45.                 <li class="flex-item">
  46.                     <h1>TEST</h1>
  47.                 </li>
  48.                 <li class="flex-item">
  49.                     <h1>TEST</h1>
  50.                 </li>
  51.             </ul>
  52.  
  53.  
  54.  
  55. </body>
  56. </html>
Advertisement
Add Comment
Please, Sign In to add comment