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)一样使用它。你的代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您应该将allowed_ips_app_elb_https_env_specific更改为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;
}

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)

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>