Flexbox布局下单个div高度独立设置问题求助

嘿，这个问题我之前也碰到过！罪魁祸首是Flexbox默认的align-items: stretch属性——它会强制同一flex容器里的所有子元素高度拉平，和最高的那个保持一致。所以当你展开课程1的内容让它变高时，课程2也会被自动拉长。

快速解决方案 #

只需要给你的.question类添加一个align-self: flex-start属性，就能让每个课程卡片保持自己的固有高度，不再受其他元素影响：

.question{
  border:1px solid; 
  width: 40%; 
  text-align: center; 
  margin:2% auto;
  /* 添加这行代码解决高度同步问题 */
  align-self: flex-start;
}
.groupe{
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
}
table{ 
  text-align: center; 
  width: 100%; 
}
#save{ display:none; }
#accueil{margin-left:1% !important;}
#listequestion{ display: flex; flex-wrap: wrap; }
.imagesuppr { float:right; width:32px; cursor:pointer; }
.imagesedit { float:right; width:32px; cursor:pointer; }

原理说明 #

align-self属性可以覆盖flex容器的align-items全局设置，为单个子元素指定垂直对齐方式。flex-start表示元素会沿着交叉轴（这里是垂直方向）的起点对齐，高度完全由自身内容决定，不会被其他兄弟元素强制拉伸。

额外修复提示 #

看了你的jQuery代码，发现几个类选择器少了必要的点（.），比如$("detailscoursplus")应该改成$(".detailscoursplus")，不然点击展开/收起的事件不会生效！修正后的核心JS代码片段：

$('.detailscours').hide() 
$('.detailsquestion').hide() 
var bonrep= 'reponse4'; 
var bonrep= '#'+bonrep + '1'; 
$(bonrep).css("border","1px solid green"); 

$(".imagesuppr").click(function(){ 
  var r = confirm("Etes-vous sur de vouloir supprimer cette question?"); 
  if (r == true) { 
    var valeur= $(this).attr('value'); 
    var formcour="elle"+valeur; 
    document.getElementById(formcour).submit(); 
  } 
}); 

$(".imagesedit").click(function(){ 
  var valeur= $(this).attr('value'); 
  var formcour="formedit"+valeur; 
  document.getElementById(formcour).submit(); 
}); 

$("#bouttonverrou").click(function(){ 
  document.getElementById("deverquest").submit(); 
}) 

// 修正类选择器，添加.
$(".detailscoursplus").click(function(){ 
  value = $(this).attr('value') 
  displaycours="#detailscours"+ value; 
  $(displaycours).toggle("slow") 
}) 

// 修正类选择器，添加.
$(".detailsquestionplus").click(function(){ 
  value = $(this).attr('value') 
  displayquestion="#detailsquestion"+ value; 
  $(displayquestion).toggle("slow") 
})

这样调整后，课程2的高度就不会跟着课程1变化了，点击展开/收起的功能也能正常工作~

内容的提问来源于stack exchange，提问作者Paul Tanné