如您所见,第一行中的列表项具有相同的高度。但是第二行中的项目具有不同的高度。我希望所有物品的高度均匀。
有没有办法实现这一点,而不给出固定高度,只使用flexBox?
这是我的代码
- .list {
- display: flex;
- flex-wrap: wrap;
- max-width: 500px;
- }
- .list-item {
- background-color: #ccc;
- display: flex;
- padding: 0.5em;
- width: 25%;
- margin-right: 1%;
- margin-bottom: 20px;
- }
- .list-content {
- width: 100%;
- }
- <ul class="list">
- <li class="list-item">
- <div class="list-content">
- <h2>Box 1</h2>
- <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
- </div>
- </li>
- <li class="list-item">
- <div class="list-content">
- <h3>Box 2</h3>
- <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
- </div>
- </li>
- <li class="list-item">
- <div class="list-content">
- <h3>Box 2</h3>
- <p>Lorem ipsum dolor</p>
- </div>
- </li>
- <li class="list-item">
- <div class="list-content">
- <h3>Box 2</h3>
- <p>Lorem ipsum dolor</p>
- </div>
- </li>
- <li class="list-item">
- <div class="list-content">
- <h1>h1</h1>
- </div>
- </li>
- </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替代方案。