html – 根据容器中项目的数量进行flexbox包装

概述我正在尝试通过遵守此规则在每行中创建一个包含不同元素的flexbox： >如果有四个项目：按行显示两个项目 >如果有五个项目：第一行显示3个项目,第二行显示2个项目 >如果有六个项目：按行显示三个项目 我的问题是当我在第二行中有四个项目flexbox wrap最后一个元素时. 这是我的代码 .blocWrapper { border: 1px solid red; display: fle 我正在尝试通过遵守此规则在每行中创建一个包含不同元素的flexBox：

>如果有四个项目：按行显示两个项目
>如果有五个项目：第一行显示3个项目,第二行显示2个项目
>如果有六个项目：按行显示三个项目
我的问题是当我在第二行中有四个项目flexBox wrap最后一个元素时.

这是我的代码

.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,.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 >  <article >    <div >      <div >bloc droit</div>      <div ID="blocContenu"> contenu droit </div>      <div ID="blocLIEn"> lIEn</div>    </div>    <div >      <div >bloc simulateur</div>      <div ID="blocContenu"> contenu simulateur </div>      <div ID="blocLIEn"> lIEn</div>    </div>    <div >      <div >bloc activite professionnelle</div>      <div ID="blocContenu"> contenu activite professionnelle </div>      <div ID="blocLIEn"> lIEn</div>    </div>    <div >      <div >bloc activite professionnelle</div>      <div ID="blocContenu"> contenu activite professionnelle </div>      <div ID="blocLIEn"> lIEn</div>    </div>    <div >      <div >bloc activite professionnelle</div>      <div ID="blocContenu"> contenu activite professionnelle </div>      <div ID="blocLIEn"> lIEn</div>    </div>  </article></div>

解决方法 由于FlexBox没有可以设置项目应该如何换行的属性,因此我在这里使用伪元素来完成相同的 *** 作.

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

它的作用是简单地取全宽,并强制前后的任何元素都在它们自己的行上.根据订单,我们将其定位为最后.

然后使用聪明的nth-child / nth-last-child规则,我们可以计算项目数量,如果是4,我们将使用顺序：2之后的所有位置除了前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,.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 >  <article >      <div >      <div >bloc droit</div>      <div ID="blocContenu"> contenu droit </div>      <div ID="blocLIEn"> lIEn</div>    </div>    <div >      <div >bloc simulateur</div>      <div ID="blocContenu"> contenu simulateur </div>      <div ID="blocLIEn"> lIEn</div>    </div>    <div >      <div >bloc activite professionnelle</div>      <div ID="blocContenu"> contenu activite professionnelle </div>      <div ID="blocLIEn"> lIEn</div>    </div>    <div >      <div >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,.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 >  <article >      <div >      <div >bloc droit</div>      <div ID="blocContenu"> contenu droit </div>      <div ID="blocLIEn"> lIEn</div>    </div>    <div >      <div >bloc simulateur</div>      <div ID="blocContenu"> contenu simulateur </div>      <div ID="blocLIEn"> lIEn</div>    </div>    <div >      <div >bloc activite professionnelle</div>      <div ID="blocContenu"> contenu activite professionnelle </div>      <div ID="blocLIEn"> lIEn</div>    </div>    <div >      <div >bloc activite professionnelle</div>      <div ID="blocContenu"> contenu activite professionnelle </div>      <div ID="blocLIEn"> lIEn</div>    </div>       <div >      <div >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?

总结

以上是内存溢出为你收集整理的html – 根据容器中项目的数量进行flexbox包装全部内容，希望文章能够帮你解决html – 根据容器中项目的数量进行flexbox包装所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。