Flex 显示 ul 列表高度

Question

我有一个 ul 列表，我正在显示 display:flex。

我希望每个列表项的高度都是自动的，但所有列表项都在扩展以匹配与高度最大的列表项相同的高度。

这里 fiddle 显示了问题：

  <ul class="home_slider">
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="three">three</li>
    <li id="four">four</li>
  </ul>

CSS

.home_slider{
  display:flex;
  list-style-type:none;
}
.home_slider li{
  width:80px;
  height:auto;
}
#one{
  height:140px;
}
#two,#three,#four{
  height:auto;
}

Answer 1

将 align-items: flex-start 添加到您的 flexbox，它们将采用自动高度：

.home_slider {
  display: flex;
  align-items: flex-start;
  list-style-type: none;
}

列表项正在扩展以与具有最大高度的列表项匹配相同的高度，因为 align-items 默认计算为 stretch。

$('.home_slider > li:first').addClass('active');

$('#right').click(function() {
  $('.active').next().addClass('active').prev().removeClass('active');
  $('.home_slider > li:last').after($('.home_slider > li:first'));
});

$('#left').click(function() {
  $('.home_slider > li:first').before($('.home_slider > li:last'));
  $('.active').prev().addClass('active').next().removeClass('active');
});

.nav_buttons {
  display: inline-flex;
  color: #fff;
  padding: 16px;
}
#left {
  margin-right: 8px;
  background: grey;
  padding: 4px;
}
#right {
  background: grey;
  padding: 4px;
}
#right:hover,
#left:hover {
  cursor: pointer;
  opacity: 0.8;
}
.home_slider {
  display: flex;
  align-items: flex-start;
  list-style-type: none;
}
.home_slider li {
  width: 80px;
  height: auto;
  border: 0px solid black;
}
#one {
  background: red;
  height: 140px;
}
#two {
  background: lightblue;
  height: auto;
}
#three {
  background: lightgreen;
  height: auto;
}
#four {
  background: orange;
  height: auto;
}
.active {
  border: 0px solid black !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="nav_buttons">
    <div id="left">left button</div>
    <div id="right">right button</div>
  </div>
  <ul class="home_slider">
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="three">three</li>
    <li id="four">four</li>
  </ul>
</body>

让我知道你对此的反馈。谢谢！

Flex 显示 ul 列表高度

Flex display ul list height

html

css

height

flexbox