The default styles for the hr element are set by the browser, with Chrome as an example:
https://i.sstatic.net/EKWJ4.png
When in a flex container, using auto margins will take up all available space in the margin direction.
For instance, setting -webkit-margin-start: auto (equivalent to margin-left: auto) and -webkit-margin-end: auto (equivalent to margin-right: auto) will consume the free space on the left and right of the hr element, resulting in its compression to width: 0 due to lack of content inside.
To counter these auto margins, you can either use width: 100%, or more efficiently, just override it with margin: 0.
Even after removing the auto margins, the parent's align-items: center property will come into effect.
https://i.sstatic.net/f7zcm.png
This change overrides the default
align-items: stretch</code behavior, performing the same function as the left/right <code>auto
margins. Consequently, the
hr element is compressed to
width: 0.
To adjust your hr rule accordingly, make the following tweaks:
hr {
margin: 0;
align-self: stretch;
}
* {
/* Makes width and height include padding, border */
box-sizing: border-box;
}
body {
font-family: "Quicksand", sans-serif;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #2d3c49;
text-transform: uppercase;
}
h1 {
font-weight: 200;
/* Browsers typically display h1 as 2em */
font-size: 2.6em;
margin-bottom: 0;
}
/* Adds a bit of space above subtitle (set h1 bottom margin to 0) */
header h4 {
margin-top: 7px;
}
/* Top content */
header {
display: flex;
max-width: 1000px;
margin: 0 auto;
margin-top: 1em;
/* Vertically centers logo */
align-items: center;
}
/* logo img */
.logo {
height: 90px;
width: auto;
margin-right: auto;
}
/* Only subtitle isn't aligned all the way to the right; this fixes it. TODO: figure out why doesn't apply to h1 text */
.header-text {
display: flex;
justify-content: flex-end;
}
hr {
background-color: #7d97ad;
max-width: 1000px;
/* margin-bottom: 1em; */
border: none;
height: 3px;
margin: 0 0 1em 0; /* NEW */
align-self: stretch; /* NEW */
}
.main-image {
max-width: 1000px;
height: auto;
}
/* Applies to content within <main> element (excludes header, footer) */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
}
/* Applies to project section (including header text) */
.container-projects {
display: flex;
/* Parent container needs this for flex-item to take full width in row */
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
margin: 2em 0;
}
.portfolio-header {
/* Puts header in its own row without removing from container with row...
It's important to note that when using flex, auto margins take precedence over keyword alignment properties such as justify-content and align-items. The presence of an auto margin will utilize all available free space on the line before any alignment properties can come into play. If there is no remaining free space after applying auto margins, align-items won't have any impact.
Hence, in the given code snippet, align-items has no effect until the auto margins are removed.
8.1. Aligning with auto margins
Prior to alignment using justify-content and align-self, any positive free space is allocated to auto margins in that dimension.
If the free space is distributed to auto margins, alignment properties will not be effective in that dimension as the margins would have already consumed all available free space.
For further insights on how flex auto margins work, consider the following resources:
- In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?