Flexbox和：nth- child没有正确呈现

Question

我正在尝试制作4个盒子，其中前2个是绿色的，内容（一个字体 - 真棒图标和一个<p>应该垂直居中。

.big-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
 .big-div:nth-child(-n + 2) {
    background-color: green;
 }
.small-div {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 50px;
  flex: 0 0 50%;
  text-align: center;
}
p {
  margin: 0;
}

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<div class="big-div">
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>    
    <p>Number 1</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 2</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 3</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 4</p>
  </div>
</div>

我尝试过但尝试过但我无法工作。我的代码有问题吗？

Answer 1

你在错误的元素上使用nth它应该像这个.big-div div:nth-child(-n + 2)一样使用。你的代码：

.big-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
 .big-div div:nth-child(-n + 2) {
    background-color: green;
 }
.small-div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 50px;
  flex: 0 0 50%;
  text-align: center;
}
p {
  margin: 0;
}

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<div class="big-div">
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>    
    <p>Number 1</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 2</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 3</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 4</p>
  </div>
</div>

Answer 2

你应该将big-div:nth-child改为small-div:nth-child而对于small-div你需要justify-content: center

.big-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
 .small-div:nth-child(-n + 2) {
    background-color: green;
 }
.small-div {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 50px;
  flex: 0 0 50%;
  text-align: center;
  justify-content: center;
}
p {
  margin: 0;
}

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<div class="big-div">
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>    
    <p>Number 1</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 2</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 3</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 4</p>
  </div>
</div>

Answer 3

在justify-content: center;使用.small-div作为垂直中心。

而你的nth-child无法正常工作，因为你的错误应用。

你必须将它应用于子元素.small-div

将.big-div:nth-child(-n + 2)改为.big-div .small-div:nth-child(-n + 2)

.big-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.big-div .small-div:nth-child(-n + 2) {
  background-color: green;
}

.small-div {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 50px;
  flex: 0 0 50%;
  text-align: center;
  justify-content: center;
}

p {
  margin: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="big-div">
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    <p>Number 1</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    <p>Number 2</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    <p>Number 3</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    <p>Number 4</p>
  </div>
</div>

Answer 4

对于nth-child，你需要在.small-div上做

.big-div .small-div:nth-child(-n + 2) {
    background-color: green;
}

并且要将div中的元素垂直居中，您需要：

align-content: center;

因为align-items: center;是当你只有一行元素并排时，并且当你有2个或更多元素时，使用align-content。

.big-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

 .big-div .small-div:nth-child(-n + 2) {
    background-color: green;
 }

.small-div {
  display: flex;
  align-content: center;
  flex-direction: column;
  min-height: 50px;
  flex: 0 0 50%;
  justify-content: center;
  text-align: center;
}
p {
  margin: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="big-div">
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>    
    <p>Number 1</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 2</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 3</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 4</p>
  </div>
</div>