html - 在这种情况下如何正确设置显示弹性

Question

我正在使用display:flex;div 里面有 3 个 div（可能更多）。这些 div 的宽度为 30%，并且还设置min-width为防止过度收缩（此 div 中有文本，因此必须可读）。

我的目标是实现这一点，当一行中的所有 div 没有更多空间时，然后将没有空间的 div 打破到另一行。我已经实现了这一点，flex-flow:row wrap;但这是问题发生的地方。

如您所见，第一行的两个 div 之间有一个很大的空白区域，第三个 div 粘在第一个 div 上。我试图用 在那里腾出空间margin-top，但我想实现 div 之间的空间相同（水平和垂直）。您有什么建议，还是我应该根据屏幕宽度为不同宽度的 div 设置一些带有媒体查询的断点？

.container{
  background-color:#eee;
  width:100%;
  height:100;
  max-width:1200px;
  margin:0 auto;
}

.card-wrapper{
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
}

.card{
  background-color:#ccc;
  width:25%;
  max-width:300px;
  min-width:220px;
  padding:1em;
  margin:0em 1em;
  margin-top:2em;
}

.card h1{
  text-align:center;
}

.card p{
  text-align:left;
}

<div class="container">
   <div class="card-wrapper">
     <div class="card">
       <h1>This is card 1 </h1>
       
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     </div>
     
     <div class="card">
       <h1>This is card 2 </h1>
       
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     </div>
       
     <div class="card">
       <h1>This is card 3 </h1>
       
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     </div>
     
  </div>
</div>

标签： htmlcssflexbox

Answer 1

你觉得这个决定怎么样？Flex 容器根据屏幕大小均匀分布。在 css 中，我标记了编辑。

.container{
  background-color:#eee;
  width:100%;
  height:100;
  max-width:1200px;
  margin:0 auto;
}

.card-wrapper{
  display:flex;
  flex-flow:row wrap;
  /*justify-content:space-between;*/
}

.card{
  background-color:#ccc;
  /*width:25%;*/
  /*max-width:300px;*/
  min-width:220px;
  padding:1em;
  margin:0em 1em;
  margin-top:2em;
  flex: 1; /*add this it*/
}

.card h1{
  text-align:center;
}

.card p{
  text-align:left;
}

<div class="container">
   <div class="card-wrapper">
     <div class="card">
       <h1>This is card 1 </h1>
       
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     </div>
     
     <div class="card">
       <h1>This is card 2 </h1>
       
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     </div>
       
     <div class="card">
       <h1>This is card 3 </h1>
       
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     </div>
     
  </div>
</div>

第二：

$(document).ready(function(){
  let width_nth = $('.card').width();
  $('.card:nth-child(3)').css('flex' , 'unset');
  $('.card:nth-child(3)').css('width' , width_nth +'px');
});

.container{
  background-color:#eee;
  width:100%;
  height:100;
  max-width:1200px;
  margin:0 auto;
}

.card-wrapper{
  display:flex;
  flex-flow:row wrap;
  /*justify-content:space-between;*/
}

.card{
  background-color:#ccc;
  /*width:25%;*/
  /*max-width:300px;*/
  min-width:220px;
  padding:1em;
  margin:0em 1em;
  margin-top:2em;
  flex: 1; /*add this it*/
}

.card h1{
  text-align:center;
}

.card p{
  text-align:left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
   <div class="card-wrapper">
     <div class="card">
       <h1>This is card 1 </h1>
       
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     </div>
     
     <div class="card">
       <h1>This is card 2 </h1>
       
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     </div>
       
     <div class="card">
       <h1>This is card 3 </h1>
       
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     </div>
     
  </div>
</div>