如何在多行flexbox布局中指定換行符？有沒有辦法在多行flexbox中進行換行？例如，在此CodePen中的每個第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;}<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; */ }
3 回答
一只甜甜圈
TA貢獻1836條經(jīng)驗 獲得超5個贊
截至2017年10月，既display:contents沒有page-break-after得到廣泛的支持，更好的說是關(guān)于支持這個但不支持其他玩家的Firefox，我提出了以下“hack”我認(rèn)為比硬更好在每個第3個元素之后的中斷編碼，因為這將使頁面移動友好變得非常困難。
正如所說它是一個黑客，缺點是你需要添加相當(dāng)多的額外元素，但它可以做到這一點，即使在過時的IE11上也能跨瀏覽器工作。
“hack”是簡單地在每個div之后添加一個額外的元素，設(shè)置為display:none然后使用css nth-child來決定實際上哪一個應(yīng)該被強制顯示為這樣的線制動：
.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>
添加回答
舉報
0/150
提交
取消