flex显示ul列表高度答案

【问题标题】：Flex display ul list heightflex显示ul列表高度
【发布时间】：2017-09-04 11:17:24
【问题描述】：

我有一个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;
}

【问题讨论】：

标签： html css flexbox height

【解决方案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>

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

【讨论】：

谢谢！很高兴有一个简单的解决方案。