滑動滑塊不能在柔性容器中工作

Question

我試圖在一列中垂直放置一個光滑的輪播（）。所以我在列（光滑滑塊的容器）上使用display: flex; align-items: center;，但它打破了滑塊。

因此，我嘗試將絕對位置或使用flexbox的傳送帶居中，但它們都打破了滑動滑塊。

我希望有人得到了這個問題:)

在這裏，問題的小提琴的CSS/JS/jQuery的解決方案：https://jsfiddle.net/victor_allegret/g3dsd78w/

（抱歉，我得加上光滑的堆棧溢出段的問題）

HTML：

<div class='flex-container'> 

<div class='single-item'> 

    <div><h3>1</h3></div> 
    <div><h3>2</h3></div> 
    <div><h3>3</h3></div> 
    <div><h3>4</h3></div> 
    <div><h3>5</h3></div> 
    <div><h3>6</h3></div> 

</div> 

</div> 

CSS：個

.flex-container { 
/* Using flexbox */ 
display: flex; 
align-items: center; 
/*----*/ 
margin: 0 auto; 
padding: 40px; 
height: 500px; 
width: 80%; 
color: #333; 
background: #419be0; 
} 

.slick-slide { 
text-align: center; 
color: #419be0; 
background: white; 
} 

JS：

$(".single-item").slick({ 
dots: true 
}); 

Answer 1

喜歡這個？ With absolute position.

.abs-container { 
    position:absolute; 

    height:140px; 
    width:300px; 
    top:50%; 
    left:50%; 
    margin:-70px 0 0 -150px; 

    color: #333; 
    background: #419be0; 
} 

And this with FlexBox.

.flex-container { 
    position:absolute; 
    top:0px; 
    bottom:0px; 
    width:100%; 
    height:100%; 

    /* Using flexbox */ 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: center; 
    align-content: stretch; 
    align-items: center; 
    /*----*/ 

    color: #333; 
    background: #419be0; 
} 
.flex-child { 
    width: 300px; 
    order: 0; 
    flex: 0 1 auto; 
    align-self: center; 
} 

HTML

<div class='flex-container'> 
    <div class='flex-child'> 
     <div class='single-item'> 
     . 
     . 
     .