フレックス表示ulリストの高さ

display:flexと表示しているulリストがあります。フレックス表示ulリストの高さ

私は各リストアイテムの高さをautoにしたいと思いますが、すべてのリストアイテムが、最大の高さを持つリストアイテムと同じ高さに一致するように展開されています。あなたのflexboxにalign-items: flex-startを追加し、彼らは自動車の高さになります

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

出典

2016-09-11 Sam Assoum

：

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

リスト項目をここで

は、問題を示すfiddleありますに合わせて拡大しています最大高さがのリスト項目と同じ高さです。 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>

私はこの上のあなたのフィードバックを知ってみましょう。ありがとう！

出典

2016-09-12 11:06:17 kukkuz

ありがとうございました！嬉しいことに、簡単な解決策があります。 –

あなたは大歓迎です！ :) – kukkuz

フレックス表示ulリストの高さ

答えて

関連する問題