Question

检查 DEMO

我尝试在父div的宽度超过时将子div元素移到新行。我尝试了display：flex，但是当父div的宽度超过子宽度时，子div不会换行。当子div元素超过父元素的宽度时，应将其放在新行中。

HTML

 <div class="wrap">
      <div class="block">Block 1</div>
      <div class="block">Block 2</div>
      <div class="block">Block 3</div>
      <div class="block">Block 4</div>
      <div class="block">Block 5</div>
</div>

CSS

.wrap
{
  width:140px;
  display:flex;
  background:yellow;
}
.block
{
  margin-right:5px;
  width:70px;
}

Answer 1

display: flex;的默认设置是不允许子级换行-尝试将flex-wrap: wrap;属性添加到.wrap选择器中

Answer 2

OnPostAsync

<script type="text/javascript">
   window.addEventListener("beforeunload", function (event) {
         showLoader(); //opens up a bootstrap modal with some animating loader icon
    });
</script>

检查此代码。您可以将.wrap { width:140px; flex-flow:row wrap; display: flex; background:yellow; } .block { margin-right:5px; width:70px; }与<div class="wrap"> <div class="block">Block 1</div> <div class="block">Block 2</div> <div class="block">Block 3</div> <div class="block">Block 4</div> <div class="block">Block 5</div> </div>一起使用

当它超出父div时，HTML在新行中显示子div

2 个答案: