flexbox阻止行的包装

Question

我有以下代码段，当您单击其中一个红色框时，其宽度会翻倍。我想要实现的功能是，当宽度增加时，该行中的其他框缩小以停止将框包装到新的第3行。

＆＃13;

＆＃13;

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

  $(this).toggleClass('selected');
})

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我能够通过逐字地包装单个flexbox中的每一行来实现所需的功能，但是我想知道是否有一种不需要这样的css方法。原因是盒子正在动态切换开关，我希望它们能够流动＆＃34;流动＆＃34;正如您所期望的那样，明确定义行会使这更加尴尬。

Answer 1

如果您有2行或最多3行，则可以使用伪:before和/或:after来强制换行。 flex:1;应在每行上均匀分派子项。您还可以使用min-width轻松添加转换。

此技术允许您绘制3行而无需额外标记。要绘制更多行，使用新容器或插入元素以与伪操作相同的方式打破行。

2行的例子

＆＃13;

＆＃13;

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);}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

3行示例：

＆＃13;

＆＃13;

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);}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;