Question

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

如果有四个项目：按行显示两个项目
如果有五个项目：第一行显示3个项目，第二行显示2个项目
如果有六个项目：按行显示三个项目我的问题是当我在第二行中有四个项目flexbox wrap last元素时。

这是我的代码

.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，我们会使用order: 2在{ ::before，当只有4时，它会使它们为2乘2。

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

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

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

当超过4时，第一行将有3个（如果有足够的空间可用，我确保这个演示的额外规则有最小宽度）

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

组合这样的CSS选择器可以非常强大并扩展到计算项目，例如在最后一行，像这样：

FlexBox align (stretch) last Item

或者像这样：

Can CSS detect the number of children an element has?

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

1 个答案: