1

Estou fazendo um curso de bootstrap 4, o professor usa e ensina que existe a classe flex-items para alinhamento, para alinhar verticalmente por exemplo, poderiamos utilizar algo assim:

flex-items-md-middle

o problema que comigo não funciona, no momento da aula, o bootstrap 4 ainda estava em fase beta, não sei se podem ter mudado essa classe. No site do bootstrap não encontrei referencia nenhuma a respeito dela, ela sofreu alterações?

1 Resposta 1

2

Cara acho que vc está fazendo confusão, não existe a classe flex-items..., provavelmente o que está procurando é justify-content-md-center e align-items-md-center. No caso o md é para a resolução Média.

HORIZONTALMENTE

.d-flex{background-color: #999;}
.p{background-color: #f9f}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex justify-content-start">
  <p class="p">ALINHA NA ESQUERDA</p>
</div>----
<div class="d-flex justify-content-end">
  <p class="p">ALINHA NA DIREITA</p>
</div>----
<div class="d-flex justify-content-center">
  <p class="p">ALINHA NO CENTRO</p>
</div>----
<div class="d-flex justify-content-between">
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
</div>----
<div class="d-flex justify-content-around">
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
  <p class="p">CRIA ESPAÇOS ENTRE ELEMENTOS</p>
</div>

VERTICALMENTE

.d-flex{background-color: #999;height:100px;}
.p{background-color: #f9f;margin:0;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="d-flex align-items-start">
    <p class="p">ALINHA NO TOPO</p>
  </div>----
  <div class="d-flex align-items-end">
    <p class="p">ALINHA NO FIM</p>
  </div>----
  <div class="d-flex align-items-center">
    <p class="p">ALINHA NO CENTRO</p>
  </div>----
  <div class="d-flex align-items-baseline">
    <p class="p">ALINHA NA BASE</p>
  </div>----
  <div class="d-flex align-items-stretch">
    <p class="p">ESTICA O CONTEÚDO</p>
  </div>

Olha neste link aqui.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .