Início / coding / Perguntas / 76932901
Accepted
dane
Asked: 2023-08-19 06:43:00 +0800 CST

CSS Inline Flex e Quebra de Parágrafo

  • 772

Como você faz com que o flex inline seja agrupado na mesma linha que a última linha de uma tag de várias linhas? Eu acredito que ele vê a tag h1 de 100% de largura, então está quebrando para passar por baixo dela, mas existe uma maneira de fazê-la fluir para o espaço em branco ao lado de h1?

.post {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: 10px;
}

.post-title {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.post-meta {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}
<div class="post">
  <h1 class="post-title"><a href="#">A Long Post Title but not too long to be obnoxious</a></h1>
  <div class="post-meta">
    <div class="post-date">11 November 2022</div>
    <div class="post-category"><a href="#">Writing, Religion</a></div>
  </div>
</div>

CSS flex vá para o espaço vazio. Em telas onde o tem que quebrar para uma segunda linha, o .post-meta aparece na linha logo após o ao invés de quebrar para ficar próximo ao texto.

Obrigado!

css

1 respostas

  1. Best Answer

    Não abuse do flexbox, você não precisa dele aqui e não pode conseguir o que deseja com ele.

    .post-title {
  display: inline;
}

.post-meta {
  display: inline-block;
  vertical-align: middle;
}
    <div class="post">
  <h1 class="post-title"><a href="#">A Long Post Title but not too long to be obnoxious</a></h1>
  <div class="post-meta">
    <div class="post-date">11 November 2022</div>
    <div class="post-category"><a href="#">Writing, Religion</a></div>
  </div>
</div>

    • 3

relate perguntas