相关疑难解决方法(0)

多行flexbox中的换行符

有没有办法在多行flexbox中进行换行?

例如,在此笔中的每个第3项之后中断

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n) {
  background: silver;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>
Run Code Online (Sandbox Code Playgroud)

喜欢

.item:nth-child(3n){
  /* line-break: after; */    
}
Run Code Online (Sandbox Code Playgroud)

html css flexbox

202
推荐指数
7
解决办法
22万
查看次数

使用flexbox每行排列2个项目

想象一下,我有以下标记

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

和风格

.item {
  width: 100%
}
Run Code Online (Sandbox Code Playgroud)

并且由于某些原因我无法改变宽度我可以 .item 通过.container使用flexbox或任何其他方式设置父容器,在每行中排列2个项目吗?

html css css3 flexbox

31
推荐指数
2
解决办法
4万
查看次数

标签 统计

css ×2

flexbox ×2

html ×2

css3 ×1