Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display hr horizontally with flex?

Tags:

html

css

flexbox

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>
like image 804
Noah Passalacqua Avatar asked Mar 23 '17 20:03

Noah Passalacqua


People also ask

How do I make my HR horizontal?

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.

How do I add a horizontal HR in HTML?

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.

What is horizontal HR?

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.


2 Answers

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>
like image 151
Michael Coker Avatar answered Nov 07 '22 20:11

Michael Coker


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>
like image 32
Nenad Vracar Avatar answered Nov 07 '22 20:11

Nenad Vracar