luistavares

CSS - Como usar o flexbox layout para posicionar elementos

Aug 24th, 2022
1,184
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.12 KB | Source Code | 0 0
  1. <html lang="pt-br">
  2.     <head>
  3.         <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
  4.         <meta charset="utf-8">
  5.         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  6.         <style>
  7.             .my-box{
  8.                 border: 2px solid black;
  9.                 border-radius: 10px;
  10.                 width: 500px;
  11.                 height: 100px;
  12.                 padding-top: 40px;
  13.                 margin-left: auto;
  14.                 margin-right: auto;
  15.                 display: flex; /* define um contexto flex para os filhos */
  16.                 justify-content: space-evenly;        
  17.             }
  18.             .my-box-item{    
  19.                 width: 110px;
  20.                 height: 50px;    
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <div class="my-box">            
  26.             <button class='my-box-item'><i class="fas fa-play fa-2x"></i>Testar</button>
  27.             <button class='my-box-item'><i class="fas fa-sign-in-alt fa-2x"></i>Logar</button>
  28.             <button class='my-box-item'><i class="fas fa-user-plus fa-2x"></i>Cadastrar</button>                               
  29.         </div>
  30.     </body>
  31. </html>
  32.  
Advertisement
Add Comment
Please, Sign In to add comment