flexbox 防止換行

Question

我有以下代碼段，當您單擊其中一個紅色框時，其寬度會加倍。 我想要實現的功能是，當寬度增加時，該行中的其他框會縮小以停止將一個框包裝到新的第 3 行。

 $('.card').click(function() { if ($('.card.selected')[0] != this) $('.card.selected').toggleClass('selected', false); $(this).toggleClass('selected'); })

 section { display: flex; flex: 1 1 100%; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; width: 100%; } .card { display: block; width: calc(25% - 2px); height: 40px; background-color: #f00; margin: 1px; -webkit-transition: .15s; transition: width .15s; } .selected { width: calc(50% - 2px); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </section>

我能夠通過將每一行包裝在單獨的 flexbox 中來實現所需的功能，但是我想知道是否有不需要這樣做的 css 方法。 原因是盒子被動態地打開和關閉，我希望它們像你期望的那樣“流動”，明確定義行使得這更加尷尬。

Answer 1

如果您有 2 行或最多 3 行，則可以使用偽:before和/或:after強制換行。 flex:1; 應該均勻地分派每一行的孩子。 您還可以使用min-width輕松添加過渡。

這種技術允許您在沒有額外標記的情況下繪制 3 行。 要繪制更多行，請使用新容器或插入元素以與偽代碼相同的方式斷開線條。

2 行示例

 section { display:flex; flex-wrap:wrap; } div { flex:1; min-width:calc(16.66% - 2px); transition:0.5s; margin:auto; height: 40px; background-color: #f00; margin: 1px; -webkit-transition: 0.15s; transition: width 0.15s; order:0; } div:nth-child(4)~div {/* every div starting from the fith */ order:2; } section:before{ content:''; width:100%; /* fill a whole row */ order:1;/* comes before the fith div*/ } div:focus {/* css demo purpose instead js onclick event */ min-width:calc(50% - 2px); transition:0.5s; background-color:yellow } div {display:flex;align-items:center;justify-content:center;} section {counter-reset: div} section div:before {counter-increment:div;content:'DIV N°: 'counter(div);}

 <section> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> </section>

3 行示例：

 section { display:flex; flex-wrap:wrap; } div { flex:1; min-width:calc(16.66% - 2px); transition:0.5s; margin:auto; height: 40px; background-color: #f00; margin: 1px; -webkit-transition: 0.15s; transition: width 0.15s; order:0; } div:nth-child(4)~div { order:2; } div:nth-child(8)~div { order:4; } section:before, section:after{ content:''; width:100%; order:1; } section:after { order:3; } div:focus { min-width:calc(50% - 2px); transition:0.5s; background-color:yellow } div {display:flex;align-items:center;justify-content:center;} section {counter-reset: div} section div:before {counter-increment:div;content:'DIV N°: 'counter(div);}

 <section> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> <div tabindex="0"></div> </section>