Como mostrar HR horizontalmente com flex?

ao usar a flexbox para o estilo, se o contentor original estiver definido em display: flex, fará com que o <hr /> seja apresentado verticalmente em vez de horizontalmente.

.container {
  display: flex;
  flex: 1;
}
<div class='container'>
  <h2>Test</h2>
  <hr />
</div>
Author: Noah Passalacqua, 2017-03-23
Source

2 answers

Use flex-grow: 1 ou width: 100% para que cresça para corresponder à largura do Pai. Deve querer usá-lo em combinação com flex-wrap: wrap em .container se planeia colocar mais crianças flex em .container

.container {
  display: flex;
  flex: 1;
}

hr {
  flex-grow: 1;
  /* width: 100%; */ /* or this */
}
<div class='container'>
    <hr>
</div>
 2
Author: Michael Coker, 2017-03-23 20:40:47

A razão para isso é que o valor padrão de align-items é stretch assim hr irá obter a mesma altura que o maior elemento em flex-container ou neste caso h2. E o valor por omissão para justify-content é flex-start de modo que a largura de hr é 0.

A maneira fácil de corrigir isto é usar flex-wrap: wrap no elemento pai e flex: 0 0 100% em hr

.container {
  display: flex;
  flex-wrap: wrap;
}
hr {
  flex: 0 0 100%;
}
<div class='container'>
  <h2>Test</h2>
  <hr>
</div>
 3
Author: Nenad Vracar, 2017-03-23 20:53:31