flexbox align-self 与 nth-child 问题答案

【问题标题】：flexbox align-self with nth-child issueflexbox align-self 与 nth-child 问题
【发布时间】：2020-07-03 02:24:18
【问题描述】：

我正在尝试在 flex-items 上使用 flexbox align-self。这是我的标记：

<div class="PortfolioItem">
    <div class="PortfolioItem__textBox">
      <h1>We have a green light</h1>
      <h2>We have a go</h2>
    </div>
  </div>
  <div class="PortfolioItem">
    <div class="PortfolioItem__textBox">
      <h1>We have a green light</h1>
      <h2>We have a go</h2>
    </div>
  </div>

这是我的 CSS：

.PortfolioItem{
  display: flex;

  height: 100vh;
  width: 100vw;
}

.PortfolioItem__textBox:nth-child(odd){
  align-self: flex-start;
}

.PortfolioItem__textBox:nth-child(even){
  align-self: flex-end;
  text-align: right;
}

当我在属性检查器中检查这个时，第 n 个子部分永远不会被读取。我错过了什么？

谢谢我

【问题讨论】：

标签： flexbox css-selectors

【解决方案1】：

将 css 更改为以下内容：

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* Flex Container */
.app {
    display: flex;

    background: #def;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

/* Flex Items */
.PortfolioItem__textBox {
    color: black;
}

.PortfolioItem{
    height: 100vh;
    width: 50vw;
}

.PortfolioItem:nth-child(odd) {
    align-self: flex-start;
}

.PortfolioItem:nth-child(even) {
    align-self: flex-end;
    margin-left: auto;
}

【讨论】：