如何将某个类从CSS中的继承属性中排除

Question

我在这里有圆形徽标，正如你所看到的，我正在尝试使用我的圆形徽标和"name"；以及"；家庭；围绕它，比如："；name"；徽标"；家庭；并且我想排除"；容器"；因为我想把它们左对齐而不是居中，所以我是灵活的孩子。这是我的代码：

header {
width: auto;
height: 35vh;
background-color: var(--clr-accent);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.logo {
background: url(/src/logo.png);
width: 6rem;
height: 6rem;
background-position: center;
background-repeat: no-repeat;
background-size: 3rem 3rem;
border: 1px solid black;
border-radius: 50%;
}
.name-fam {
display: flex;
flex-direction: row-reverse;
}

<header>
<div class="name-fam">
<h2>Name</h2>
<div class="logo"></div>
<h2>Family</h2>
</div>
<div class="container">
<div>
<h4>My marital status:</h4>
<div class="marital-status"></div>
</div>
<div>
<h4>my birthday:</h4>
<div class="birthday-date"></div>
</div>
</div>
</header>

注意：我希望flexbox在我的容器(它是子容器(中，但将容器本身排除在flex元素和集中式之外。

Answer 1

您不需要在标头上使用display: flex，因为您可以在name-famdiv上使用margin: 0 auto。此外，不确定row-reverse为什么在nam-fam上使用，因为元素在标记中的顺序是您想要的。

header {
width: auto;
height: 35vh;
background-color: var(--clr-accent);
}
.logo {
background: url(/src/logo.png);
width: 6rem;
height: 6rem;
background-position: center;
background-repeat: no-repeat;
background-size: 3rem 3rem;
border: 1px solid black;
border-radius: 50%;
}
.name-fam {
display: flex;
margin: 0 auto;
justify-content: center;
}

<header>
<div class="name-fam">
<h2>Name</h2>
<div class="logo"></div>
<h2>Family</h2>
</div>
<div class="container">
<div>
<h4>My marital status:</h4>
<div class="marital-status"></div>
</div>
<div>
<h4>my birthday:</h4>
<div class="birthday-date"></div>
</div>
</div>
</header>

如果您想在header上保留display: flex

header {
width: auto;
height: 35vh;
background-color: var(--clr-accent);
display: flex;
/* Change to row */
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.logo {
background: url(/src/logo.png);
width: 6rem;
height: 6rem;
background-position: center;
background-repeat: no-repeat;
background-size: 3rem 3rem;
border: 1px solid black;
border-radius: 50%;
}
.name-fam {
display: flex;
}
/* Add this to container to make sure it's 100% width so it will not appear to be centered */
.container {
flex: 0 0 100%;
max-width: 100%;
}

<header>
<div class="name-fam">
<h2>Name</h2>
<div class="logo"></div>
<h2>Family</h2>
</div>
<div class="container">
<div>
<h4>My marital status:</h4>
<div class="marital-status"></div>
</div>
<div>
<h4>my birthday:</h4>
<div class="birthday-date"></div>
</div>
</div>
</header>