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。

＆＃13;

$('.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');
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Flex显示ul列表高度

1 个答案: