플렉스 디스플레이 ul 목록 높이

display:flex으로 표시 할 ul 목록이 있습니다.플렉스 디스플레이 ul 목록 높이

각 목록 항목의 높이를 자동으로하고 싶지만 모든 목록 항목이 가장 큰 목록 항목과 동일한 높이로 일치하도록 확장하고 있습니다. 당신의 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 목록 높이

답변

관련 문제