Menu
When using flexbox for styling, if the parent container is set to display: flex it will cause the <hr /> to be displayed vertically instead of horizontally.
.container {
display: flex;
flex: 1;
}<div class='container'>
<h2>Test</h2>
<hr />
</div>
804
Its simple to add a horizontal line in your markup, just add: <hr>. Browsers draw a line across the entire width of the container, which can be the entire body or a child element. Originally the HR element was styled using attributes.
Adding the Horizontal Line using <hr> tag: The Horizontal Rule tag (<hr>) is used for the purpose of inserting horizontal lines in the HTML document in order to separate sections of the document. It is an empty or unpaired tag that means there is no need for the closing tag.
The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The <hr> tag is an empty tag, and it does not require an end tag.
Use flex-grow: 1 or width: 100% so it will grow to match the width of the parent. You probably want to use that in combination with flex-wrap: wrap on .container if you plan on putting more flex children in .container
.container {
display: flex;
flex: 1;
}
hr {
flex-grow: 1;
/* width: 100%; */ /* or this */
}<div class='container'>
<hr>
</div>The reason for this is that default value of align-items is stretch so hr will get the same height as largest element in flex-container or in this case h2. And default value for justify-content is flex-start so width of hr is 0.
Easy way to fix this is to use flex-wrap: wrap on parent element and flex: 0 0 100% on hr
.container {
display: flex;
flex-wrap: wrap;
}
hr {
flex: 0 0 100%;
}<div class='container'>
<h2>Test</h2>
<hr>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
