<Hr> Inside Container with Display Flex Become Corrupted

hr inside container with display flex become corrupted

According to HTML5 Rendering - The hr element, it is expected to be rendered with this style:

hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }

Specifically, note margin-left: auto, margin-right: auto.

Those styles are used to center a block element horizontally. According to Calculating widths and margins - Block

If both margin-left and margin-right are auto, their used values
are equal. This horizontally centers the element with respect to the
edges of the containing block.

In a block layout this effect is only noticeable if the block has an explicit width, otherwise the block will grow to cover all its containing block.

In Flexbox it's similar: the default align-self: auto and align-items: stretch make flex items grow to cover the flex line in the cross axis (horizontal one in column layout), and auto margins can also be used to center.

However, there is a big difference: according to Cross Size Determination, align-self: stretch does not affect flex items with auto margins:

If a flex item has align-self: stretch, its computed cross size
property is auto, and neither of its cross-axis margins are auto,
the used outer cross size is the used cross size of its flex line,
clamped according to the item’s min and max cross size properties.
Otherwise, the used cross size is the item’s hypothetical cross
size.

Then, you can fix this problem by removing the auto margins:

hr {
  margin-left: 0;
  margin-right: 0;
}

.container {  padding: 20px;  display: flex;  flex-direction: column;}hr {  margin-left: 0;  margin-right: 0;}

<div class="container">  <h3>Title</h3>  <hr />  <div class="content">    <p>This is some content</p>  </div></div>

justify-content property breaking with hr tag

margin: inherit; will resolve your issue.

html,body {  height: 100%;  margin: 0;}.div {  display: flex;  background-color: lightgreen;  justify-content: flex-start;  height: 50%;}.div div {  background-color: yellow;  border: 5px solid green;  margin: 5px;}hr{  margin: inherit;}

<div class='div'><div>A</div><div>B</div><hr><div>C</div></div>

Why does a ::before pseudoelement with content have only leading spaces stripped in a 'display: flex' container?

To better understand this, let's first add the missing cases.

.flexy {
  display: inline-flex;
}

.noname::before {
  content: ' has ';
}

.noname-after::after {
  content: ' has ';
}
span {
  border:1px solid;
}

<div class="flexy">
  A girl <span class="noname">no name</span>
</div>
<br>
<div class="flexy">
  A girl <span class="noname"><span>no name</span></span>
</div>
<br>
<div class="flexy">
  A girl <span class="noname-after"><span>no name</span></span> some text after
</div>
<br>
<div class="flexy">
  A girl <span class="noname-after"></span><span>no name</span> some text after
</div>
<br>
<div class="flexy">
  Jon Snow
  <span> knows </span>
  <span>nothing</span>
</div>

hr line in jumbotron at the end

To solve this (while keeping the <hr> elements inside the jumbotron), add the classes d-flex flex-column h-100 to the container inside the jumbotron and then add the mt-auto class (margin-top:auto) and optionally the mb-0 class (margin-bottom:0) to the last <hr> element.

d-flex flex-column classes enable a flexbox column and h-100 gives it 100% height. mt-auto on the <hr> then pushes it down. Via the pb-* class on the container, you can then control how far from the bottom the <hr> sits. In this case, I've chosen pb-4.

Click "run code snippet" below and expand to full page for testing:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<header class="hero-bg">    <!-- Start Navigation -->    <nav class="navbar navbar-expand-md navbar-dark fixed-top">        <div class="container m-auto nav-line">            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">                <span class="navbar-toggler-icon"></span>            </button>
            <div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">                <ul class="navbar-nav mt-1">                    <li class="nav-item">                        <a href="#texting" class="nav-link">Texting</a>                    </li>                    <li class="nav-item">                        <a href="#eventkonzeption" class="nav-link">Event Konzeption</a>                    </li>                    <li class="nav-item">                        <a href="#impression" class="nav-link">Impressionen</a>                    </li>                    <li class="nav-item">                        <a href="#ueber" class="nav-link">Über mich</a>                    </li>                    <li class="nav-item">                        <a href="#kontakt" class="nav-link">Kontakt</a>                    </li>                </ul>                <!-- navbar-nav -->            </div>            <!-- navbar-collapse -->        </div>        <!-- container -->    </nav>    <!-- Ende Navigation --></header>
<!-- Header --><section id="home" class="hero-bg jumbotron bg-info pb-0" style="height: 100vh;">    <div class="container d-flex flex-column h-100 pt-0 pb-4 header-h">        <hr style="background: white; height: 1px; width: 100%; border: 0">        <div class="align-items-start row justify-content-center mx-auto">
            <div class="img-logo col align-self-start">                <img class="img-fluid d-block img-responsive" src="https://placehold.it/500x100" alt="Rollywood-Logo" >            </div>            <!-- col -->        </div>
        <!-- row -->        <hr class="mt-auto mb-0" style="background: white; height: 1px; width: 100%; border: 0">
    </div>
    <!-- container --></section><!-- Header -->

Lined title in CSS/HTML

Add a rule to stop the text from wrapping with .title { white-space: nowrap; }:

.hr {  width: 100%;  display: flex;  align-items: center;}
.line {  height: 3px;  background: red;  display: inline-block;  width: 100%;}
.title {  white-space: nowrap;}

<div class='hr'>  <div class='title'>    Apes are cool animals  </div>  <div class='line'></div></div>
<div class='hr'>  <div class='title'>    Aren't they?  </div>  <div class='line'></div></div>

Not able to space items evenly in a grid container

You can do with display:flex; and justify-content: space-between; , elements inside .boxes will take margin according to width of .boxes

.boxes{width:300px;display:grid;grid-template-columns:1.4fr 2fr;border:2px solid;padding:5px;}
.boxes .right{
display:flex;flex-direction:row;justify-content:space-between;}

<div class="boxes"><div class="left"><p>test</p></div><div class="right"><p>test</p><p>test</p><p>test</p></div></div>

Bootstrap 4: vertically center content inside a container inside a custom div

For something like this I'd recommend using flex.

A complete guide can be found here.

However, in order to get everything center aligned you can do something like this, which is in fact using flex.

html {    height: 100%;}.my-background {    display: flex;    align-items: center;    justify-content: center;    text-align: center;    height: 700px;    margin-top: 100px;    background-color: rgba(0, 0, 0, 0.4);}
hr {  width: 100%;}
#content {    margin: auto;    text-align: center;    padding-top: 25%;}

<div class="my-background">    <div class="container">        <div class="row align-items-center">            <div class="col-lg-12">                <div id="content align-items-center justify-content">                    <h1>Hello World</h1>                    <h3>Welcome to my fancy Hello World page!</h3>                    <hr>                    <button class="btn btn-default btn-lg">Button</button>                </div>            </div>        </div>    </div></div>

Transparent hr for responsive vertical spacing: is it really that unsemantic?

It's not a crime at all. I'd do it with a div and a class, but you're right, it's more "semantically proper" with a <hr>. There was a tag called <spacer> and it served exactly this purpose; my only problem with <hr> is that it can only add vertical space, it's not really useful for horizontal situations. But that's a rare case anyway.

HTML5 is still not perfect for totally and absolutely semantic markup; there are tags with dashes that could solve this problem but:

http://caniuse.com/#search=custom

...they're not really supported. Not yet. However beautiful a <vertical-space> tag would be, you just can't do it right now.

So don't be scared of using some not-so-semantic markup in your code; it will evolve soon as HTML5 support increases. And don't listen to the standard-or-die kind of freaks. They are in a temporary state of learning.

---

Related Topics