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>
4
Author: Noah Passalacqua, 2017-03-23
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