flexbox根据容器中的项目数进行换行

Question

我正在尝试通过遵守此规则在每行中创建一个包含不同元素的flexbox:

• 如果有四个项目:按行显示两个项目
• if五项:第一行显示3个项目,第二行显示2个项目
• 如果有六个项目:按行显示三个项目我的发布是当我有四个项目时,flexbox包装第二行中的最后一个元素.

这是我的代码

.blocWrapper {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blocWrapper .blocContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid black;
  width: 65%;
  padding-top: 45px;
}

.blocWrapper .blocContainer .bloc {
  width: 300px;
  height: 180px;
  box-shadow: 0 0 3px rgba(0, 0, 0, .2);
  margin: auto;
  text-align: center;
  font-family: raleway;
  word-break: break-word;
  display: flex;
  align-items: center;
  flex-direction: colomn;
}

.blocWrapper .blocContainer .blocTitre {
  font-size: 20px;
  font-weight: 700;
  color: blue;
  margin: 24px;
}

<div class="blocWrapper">
  <article class="blocContainer">
    <div class=" bloc">
      <div class="blocTitre">bloc droit</div>
      <div id="blocContenu"> contenu droit </div>
      <div id="blocLien"> lien</div>
    </div>

    <div class=" bloc">
      <div class="blocTitre">bloc simulateur</div>
      <div id="blocContenu"> contenu simulateur </div>
      <div id="blocLien"> lien</div>
    </div>

    <div class=" bloc">
      <div class="blocTitre">bloc activite professionnelle</div>
      <div id="blocContenu"> contenu activite professionnelle </div>
      <div id="blocLien"> lien</div>
    </div>

    <div class=" bloc">
      <div class="blocTitre">bloc activite professionnelle</div>
      <div id="blocContenu"> contenu activite professionnelle </div>
      <div id="blocLien"> lien</div>
    </div>
    <div class=" bloc">
      <div class="blocTitre">bloc activite professionnelle</div>
      <div id="blocContenu"> contenu activite professionnelle </div>
      <div id="blocLien"> lien</div>
    </div>

  </article>

</div>

Answer 1

由于Flexbox没有一个可以设置项目包装方式的属性，因此我在这里使用一个伪元素来实现相同的目的。

.blocWrapper .blocContainer::before {
  content: '';
  width: 100%;
  order: 1;
}

它所做的只是简单地占用整个宽度，并将迫使前后的任何元素单独排成一行。有了order我们，我们将其定位在最后。

然后用一个聪明的nth-child/ nth-last-child规则，我们可以计算项目的数量，如果为4，则除第一个2之外的所有项目都使用，在order: 2，之后进行定位::before，并在只有4的情况下将它们按2比2排列。

.blocWrapper .blocContainer .bloc:nth-child(2):nth-last-child(3) ~ .bloc {
  order: 2;
}

这样的工作是，nth-child(2)将选择第二项，如果它也将是末尾的第三项，则我们知道只有4，因此该规则开始执行，并将最后的2移动到伪指令之后。

堆栈片段

.blocWrapper .blocContainer::before {
  content: '';
  width: 100%;
  order: 1;
}

.blocWrapper .blocContainer .bloc:nth-child(2):nth-last-child(3) ~ .bloc {
  order: 2;
}

当大于4时，第一行将有3个（如果有足够的可用空间，我将使用最小宽度的额外规则确保此演示具有此属性）

堆栈片段

.blocWrapper {
  display: flex;
}

.blocWrapper .blocContainer {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  width: 65%;  
  padding-top: 45px;
}

.blocWrapper .blocContainer .bloc {
  width: 300px;
  height: 180px;
  box-shadow: 0 0 3px rgba(0, 0, 0, .2);
  margin: auto;
  text-align: center;
  font-family: raleway;
  word-break: break-word;
  display: flex;
  flex-direction: column;                 /*  fixed misspelled value  */
}

.blocWrapper .blocContainer .blocTitre {
  font-size: 20px;
  font-weight: 700;
  color: blue;
  margin: 24px;
}

/*  added rules  */
.blocWrapper .blocContainer::before {
  content: '';
  width: 100%;
  order: 1;
}
.blocWrapper .blocContainer .bloc:nth-child(2):nth-last-child(3) ~ .bloc {
  order: 2;
}

/* for demo purpose, so 3 items will always fit */
.blocWrapper .blocContainer {
  min-width: 900px;  
}

<div class="blocWrapper">
  <article class="blocContainer">
  
    <div class=" bloc">
      <div class="blocTitre">bloc droit</div>
      <div id="blocContenu"> contenu droit </div>
      <div id="blocLien"> lien</div>
    </div>

    <div class=" bloc">
      <div class="blocTitre">bloc simulateur</div>
      <div id="blocContenu"> contenu simulateur </div>
      <div id="blocLien"> lien</div>
    </div>

    <div class=" bloc">
      <div class="blocTitre">bloc activite professionnelle</div>
      <div id="blocContenu"> contenu activite professionnelle </div>
      <div id="blocLien"> lien</div>
    </div>

    <div class=" bloc">
      <div class="blocTitre">bloc activite professionnelle</div>
      <div id="blocContenu"> contenu activite professionnelle </div>
      <div id="blocLien"> lien</div>
    </div>
    
  </article>

</div>

要组合这样的CSS选择器可能非常强大，并且可以扩展为对项目进行计数，例如在最后一行，如下所示：

• FlexBox对齐（拉伸）最后一个项目

或像这样：

• CSS可以检测孩子的元素有多少？