html - flexbox 根据容器中的元素数量包装

Question

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

• 如果有四个元素:按行显示两个元素
• 如果有五个元素:第一行显示 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，在 ::before 之后使用 order: 2，当只有 4 个时，用它使它们 2×2。

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

这样工作，nth-child(2) 将选择第 2 个元素，如果它也是倒数第 3 个元素，我们知道只有 4 个，因此规则开始并将最后 2 个移到伪之后。

堆栈片段

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

---

当超过 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 to check when there is only 4 items  */
.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>
    
   <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 align (stretch) last Item

或者像这样:

• Can CSS detect the number of children an element has?