Jump to content
bleszerd

Dúvida sobre estilização com flexbox

Recommended Posts

Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro.

 

Como podem ver até pela imagem, design não é meu ponto forte.

 

Código do JSX (Componente do React):

<div className="login-container">
            <section className="form">
                <form>
                    <h1>Bem vindo!</h1>

                    <input 
                        type="text"
                        placeholder="Login"
                    />
                    <input 
                        type="password"
                        placeholder="Senha"
                    />
                    <p>Possuo um Token</p>
                    <input 
                        type="text"
                        placeholder="Token"
                        className="token-input"
                    />
                </form>
            </section>
        </div>

 

Código do CSS:

.login-container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1120px;
    height: 100vh;
    margin: 0 auto;
}

.login-container section.form{
    width: 100%;
    max-width: 350px;
}

.login-container section.form form{
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1250px;
    height: 100%;
    max-height: 700px;
}

.login-container section.form form h1{
    color: #fff;
    font-weight: bolder;
    text-shadow: #1B182E 2px 2px 8px;
    font-size: 42px;
    margin-bottom: 32px;
    position: absolute;
    margin-top: -65px;
    background: transparent;
}

.login-container section.form form input{
    display: flex;
    justify-content: space-between;
    margin: 5px;
    width: 180px;
    height: 40px;
    max-width: 100%;
    font-weight: bold;
    padding: 8px;
    border-radius: 5px;
    color: white;
    background: #0A0816;
    border: solid #0D0929 2px;
}

.login-container section.form form p{

}

.login-container section.form form input + p + input{
    background: black;
    border: solid yellow 2px;
}

 

Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :)

Captura de tela_2020-04-02_21-20-59.png

Share this post


Link to post
Share on other sites

@bleszerd Boas e seja bem-vindo. Sugiro deixar o H1 antes de iniciar o form e não dentro dele. O Flex é bem interessante e você pode utilizar várias combinações para distribuir e organizar seu conteúdo, no caso em questão, sugiro deixar o "form" como o container flex e os "inputs" como itens do flex. Para a distribuição e alinhamento como solicitou, permita que haja quebra no container e defina os itens com o tamanho que ocupe o espaço pretendido, por exemplo, se você quer dois "inputs" por linha, defina-os com 50% cada. O exemplo abaixo ilustra essa sugestão.

 

form {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: center;
}
input {
  width: 50%;
}

 

Abs.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By lezão
      Ola boa tarde!
      Td bem com vcs?
       
      Alguém poderia me dar uma luz, de como fazer essas imagens ficar a frente do slideshow e qnd responsivo aparecer de 3 em 3.
       
       
      obrigado pela atenção.

    • By daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
    • By lucasseribeiro
      Bons dias, fórum!
       
      Procurei uma área específica para o JavaFX e não encontrei... Estou aprendendo a usar essa biblioteca, está ficando interessante, se assemelha às tecnologias web com as quais tenho muita familiaridade pois uso há anos. Mas o CSS do JavaFX é diferente daquele do consórcio W3, e não estou encontrando material para entender esse -fx-CSS... A referência CSS da Oracle (https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html) é obscura e não contém as infos que preciso, apesar de esclarecer muitas coisas... Passa uma impressão de que eles não querem que todos saibam!
      Por exemplo: ao estilizar uma menu-bar, mudei seu background, alterei a cor da fonte dos menus, mas eles ficaram colados uns nos outros, e eu não entendi como escolher a propriedade CSS adequada do FX para controlar a distância dos menus. Pude usar um padding, mas ao executar, quando abrimos um menu, os outros ainda são empurrados pois ainda que suas inscrições estejam separadas, os botões do menu ainda estão colados. O tutoriais não abordam o CSS do FX em profundidade, focam-se nos objetivos dos projetos e suas abordagens...
      Rsrs, podia ter no W3Schools... Alguém pode me ajudar com isso???
       
      Grato desde já!
       
      Lucas Ribeiro
    • By Sapinn
      Estou com dificuldade para chamar um arquivo CSS usando a configuração de um arquivo php. O bootstrap também não surte efeito na paginas
       
      Vejam só
      Config.php
       
      <?php define('APP_NOME','Projeto GIBI'); define('URL','http://localhost/bora_php');  
       
      index.php
       
      <?php include './../app/configuracao.php'; include './../app/Libraries/Rota.php'; include './../app/Libraries/Controller.php'; ?> <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="<?=URL?>/public/css/estilos.css">     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >         <title><?= APP_NOME?></title> </head> <body>     <?php         $rotas = new Rota();     ?>     <script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script> <script src="<?=URL?>/public/css/script.js" ></script> </body> </html> estilo.css
      html{     background-color: red; }  
      Estou tentando seguir a padronização MVC(que por sinal eu tenho certa dificuldade), então não consigo achar onde estou errando
    • By luiz monteiro
      Tudo bem pessoal!
      Estou há alguns dias pesquisando e usando diferentes dicas para resolver o problema para que a borda inferior de 1px aplicada em quatro boxes sejam exibidas igualmente no chrome, safari, mozilla, opera e IE.
      A estrutura é a seguinte:
       
      ==========CSS
       
      html, body, span, p, form, img, a, ul, ol, li, table, tr, td, div
      {
          margin: 0px;
          padding: 0px; 
          border:none; 
          outline:none;
          list-style-type:none;
          box-sizing: border-box;
      }
       
      *
      {
          font-size: 14px;
          font-family: verdana, arial;
      }
       
      .container
      {
          width: 608px;
          height: 421px;
          margin: auto;
          margin-top: 50px;
          overflow: hidden;
      }
       
      .box_one, .box_two
      {
          display: inline-block;
          width: 300px;
          height: 250px;
          overflow: hidden;
      }
       
      .border_bottom
      {
          border-bottom: #f5f5f5 solid 1px;
      }
       
      .border_bottom_white
      {
          border-bottom: #fff solid 1px;
      }
       
      .espaco
      {
          margin-right: 2px;
      }
       
      .box_tree, .box_four, .box_fift
      {
          display: inline-block;
          width: 198px;
          height: 149px;
          margin-top: 20px;
          overflow: hidden;
      }
       
      .vertical
      {
          vertical-align: top;
      }
       
       
       
      ============HTML
       
         <content>

              <div class="container">
       
                  <div class="box_one border_bottom_white espaco vertical">box one in first line</div>
                  <div class="box_two border_bottom vertical">box two in first line</div>
                  <div class="box_tree espaco border_bottom vertical">box tree in second line</div>
                  <div class="box_four espaco border_bottom vertical">box four in second line</div>
                  <div class="box_fift border_bottom vertical">box fift in second line</div>
            
          </div>
       
       </content>
       
      O que ocorre é que cada navegador exibe de uma maneira diferente, mesmo resetando o box-sizing: border-box;  o font-size e o font-family.
      Essa configuração do CSS foi a mais próxima do desejável.
      A estrutura do HTML precisa ser essa aí.
      Agradeço desde já.
       
       
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.