小编Mam*_*thé的帖子

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

我正在尝试通过遵守此规则在每行中创建一个包含不同元素的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: …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

5
推荐指数
1
解决办法
447
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1