hr元素具有浏览器设置的默认样式。例如，Chrome是这样做的：
在flex容器中，auto边距沿边距的方向占用所有空闲空间。
因此，-webkit-margin-start: auto (在LTR中等效于margin-left: auto)和-webkit-margin-end: auto (在LTR中等效于margin-right: auto)消耗hr元素左侧和右侧的所有空闲空间，将其压缩为width: 0 (因为里面没有内容)。
您可以使用auto覆盖这些width: 100%边距。但是简单地用margin: auto覆盖margin: 0可能更有效。
但即便如此，在本例中，一旦删除了auto边距，align-items: center也会从父节点开始。
这将覆盖默认的align-items: stretch，并执行与左/右auto边距相同的操作。同样，hr被压缩为width: 0。
因此，对您的hr规则进行以下两项调整：
代码语言：javascript复制hr {
margin: 0;
align-self: stretch;
}
代码语言：javascript复制* {
/* 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
.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 flex direction (setting parent container to wrap also required) */
width: 100%;
text-align: left;
color: #7d97ad;
}
/* Div containing single project's title, image, text */
/* TODO: add declarations */
.project {
width: 300px;
height: auto;
}
.project p,
h3 {
text-align: center;
}
/* Images cropped with 3:2 ratio, scaled resolution down to 600 x 400 */
.project-image {
width: 300px;
height: auto;
}
footer {
text-align: center;
margin-top: 1em;
background-color: #ccc;
color: white;
padding: 2em;
font-size: 1.1em;
}
/* Remove default 1em margin-top */
footer p {
margin-top: 0;
}
/* Applies to Font Awesome social icons */
.fab {
margin: 0 0.5em;
color: white;
}
/* Changes social icon color to dark grey on hover */
.fab:hover {
color: #2d3c49;
}
/* Media queries (breakpoints correspond to Bootstrap breakpoints). 1rem = 16px */
/* Small devices (landscape phones) */
@media screen and (max-width: 767px) {
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.3em;
}
h4 {
font-size: 1.1em;
}
/* Doesn't seem to be doing anything TODO: find out why */
.portfolio-header {
margin-bottom: 1em;
}
/* TODO: make slightly wider */
.container-projects {
margin: 1.5em 0 0 0;
}
header {
margin: 0 1em 0 0;
}
header,
.container,
footer {
max-width: 100%;
}
/* Must specify max-width for img even though parent .container has the same declaration because max-width isn't inherited */
.container img {
max-width: 100%;
}
.project {
/* Centers projects (aligned left otherwise) */
margin: 0 auto;
}
/* Aligns portfolio header text flush left of portfolio rows */
.portfolio-header {
width: 300px;
margin: 10px auto;
}
.logo {
height: 50px;
width: auto;
}
}
/* Tablets */
@media screen and (max-width: 991px) {
h1 {
font-size: 1.7rem;
}
}
/* Small laptops */
@media screen and (max-width: 1199px) {
h1 {
font-size: 2rem;
}
}代码语言：javascript复制
Natalie Cardot
Front-End Web Developer
Featured Work
Project No. 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Project No. 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Project No. 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Created by me
请注意，flex auto边距优先于关键字对齐属性(如justify-content和align-items)。如果设置了auto边距，这首先应用，占用行上的所有空闲空间。align-items排在第二位，但是没有空闲空间了，所以它什么也做不了。
这就是为什么，在上面的代码中，align-items在删除auto边距之前什么也不做。
毛边
在通过justify-content和align-self对齐之前，任何正的自由空间都分布到该维度的auto边距。
如果将空闲空间分配给auto边距，则该维度中的对齐属性将不会产生任何影响，因为边距将窃取弯曲后剩余的所有空闲空间。
关于flex auto利润率的更多细节：
在CSS中，为什么没有“正当性-项”和“正当性-自我”属性？