html – flex容器中的等高行

前端之家收集整理的这篇文章主要介绍了html – flex容器中的等高行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如您所见,第一行中的列表项具有相同的高度。但是第二行中的项目具有不同的高度。我希望所有物品的高度均匀。

有没有办法实现这一点,而不给出固定高度,只使用flexBox

这是我的代码

  1. .list {
  2. display: flex;
  3. flex-wrap: wrap;
  4. max-width: 500px;
  5. }
  6. .list-item {
  7. background-color: #ccc;
  8. display: flex;
  9. padding: 0.5em;
  10. width: 25%;
  11. margin-right: 1%;
  12. margin-bottom: 20px;
  13. }
  14. .list-content {
  15. width: 100%;
  16. }
  1. <ul class="list">
  2. <li class="list-item">
  3. <div class="list-content">
  4. <h2>Box 1</h2>
  5. <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
  6. </div>
  7. </li>
  8. <li class="list-item">
  9. <div class="list-content">
  10. <h3>Box 2</h3>
  11. <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
  12. </div>
  13. </li>
  14.  
  15. <li class="list-item">
  16. <div class="list-content">
  17. <h3>Box 2</h3>
  18. <p>Lorem ipsum dolor</p>
  19. </div>
  20. </li>
  21.  
  22. <li class="list-item">
  23. <div class="list-content">
  24. <h3>Box 2</h3>
  25. <p>Lorem ipsum dolor</p>
  26. </div>
  27. </li>
  28. <li class="list-item">
  29. <div class="list-content">
  30. <h1>h1</h1>
  31. </div>
  32. </li>
  33. </ul>

解决方法

答案是不。

原因在flexBox规范中提供:

07000

In a multi-line flex container,the cross size of each line is the minimum size necessary to contain the flex items on the line.

换句话说,当基于行的Flex容器中有多行时,每行的高度(“交叉大小”)是在行上包含弹性项所需的最小高度。

但是,CSS Grid Layout中可以使用相等高度的行:

> Equal height rows in CSS Grid Layout

否则,请考虑JavaScript替代方案。

猜你在找的HTML相关文章