多线柔性线条中断线
有多种方式可以在多行的flexbox中进行换行吗？
例如在这个笔的每个第三项之后打破
.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; } <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>
喜欢
.item:nth-child(3n){ /* line-break: after; */ }
最简单和最可靠的解决scheme是在正确的位置插入弹性项目。 如果宽度足够（ width: 100% ），则会强制换行。
.container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } .item { width: 100px; background: gold; height: 100px; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px } .item:nth-child(4n - 1) { background: silver; } .line-break { width: 100%; }
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="line-break"></div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="line-break"></div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="line-break"></div> <div class="item">10</div> </div>
对于将来的问题，也可以通过使用float属性并在每个3个元素中清除它。
这是我做的一个例子。
.grid { display: inline-block; } .cell { display: inline-block; position: relative; float: left; margin: 8px; width: 48px; height: 48px; background-color: #bdbdbd; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; text-indent: 4px; color: #fff; } .cell:nth-child(3n) + .cell { clear: both; }
<!DOCTYPE html> <html> <head></head> <body> <div class="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> <div class="cell">7</div> <div class="cell">8</div> <div class="cell">9</div> <div class="cell">10</div> </div> </body> </html>
.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; }
<div class="container"> <div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> <div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> <div class="item">10</div> </div>
@Oriol有一个很好的答案，不幸的是，截至2017年10月，既没有display:contents ，也没有广泛支持分页符，更好地说是支持这个而不是其他播放器的Firefox，我提出了以下“黑客“，我认为每个第三元素之后都要比硬编码更好，因为这会让页面移动变得非常困难。
正如所说的这是一个黑客，缺点是你需要添加很多额外的元素，但它没有伎俩，甚至在IE11上的跨浏览器。
“hack”是在每个div之后添加一个额外的元素，它被设置为display:none ，然后使用css nth-child来决定哪一个应该实际上是可见的，如下所示：
.container { background: tomato; display: flex; flex-flow: row wrap; justify-content: space-between; } .item { width: 100px; background: gold; height: 100px; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px } .item:nth-child(3n-1) { background: silver; } .breaker {display:none;} .breaker:nth-child(3n) { display:block; width:100%; height:0; }
<div class="container"> <div class="item">1</div><p class=breaker></p> <div class="item">2</div><p class=breaker></p> <div class="item">3</div><p class=breaker></p> <div class="item">4</div><p class=breaker></p> <div class="item">5</div><p class=breaker></p> <div class="item">6</div><p class=breaker></p> <div class="item">7</div><p class=breaker></p> <div class="item">8</div><p class=breaker></p> <div class="item">9</div><p class=breaker></p> <div class="item">10</div><p class=breaker></p> </div>
我认为传统的方式是灵活的，相当容易理解：
标记
<div class="flex-grid"> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> <div class="col-3">.col-3</div> <div class="col-9">.col-9</div> <div class="col-6">.col-6</div> <div class="col-6">.col-6</div> </div>
创buildgrid.css文件：
.flex-grid { display: flex; flex-flow: wrap; } .col-1 {flex: 0 0 8.3333%} .col-2 {flex: 0 0 16.6666%} .col-3 {flex: 0 0 25%} .col-4 {flex: 0 0 33.3333%} .col-5 {flex: 0 0 41.6666%} .col-6 {flex: 0 0 50%} .col-7 {flex: 0 0 58.3333%} .col-8 {flex: 0 0 66.6666%} .col-9 {flex: 0 0 75%} .col-10 {flex: 0 0 83.3333%} .col-11 {flex: 0 0 91.6666%} .col-12 {flex: 0 0 100%} [class*="col-"] { margin: 0 0 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 400px) { .flex-grid { display: block; } }
我已经创build了示例（jsfiddle）
尝试调整窗口大小在400像素，它的响应！
