2017-03-02 2 views
0

我正在構建一個Carousel類型的組件,但在上手時有些困難恰到好處固定寬度的非包裝CSS Flex

我的基本方法是一個包含大量其他div(項目)的div(包裝器)。我想在任何時候在轉盤上顯示4個項目。這些項目有不同的內容高度,但項目的高度應該相等(達到最大要求)。

我無法解決我需要使CSS正常工作的CSS組合。

使用this setup(HTML + CSS在文章底部),將忽略每個item-container上的width: 25%;

如果我添加一個固定的.item,那麼25%會踢,但項目寬度是未知的 - 這取決於瀏覽器的大小。將它設置爲1000px意味着你會丟失該內容。設置爲〜210px的作品,但是當你開始縮小瀏覽器時,你會失去內容。在大型瀏覽器上,您的間距過大。奇怪的是,如果我將flex-wrap: wrap添加到CSS,那麼25%的寬度正確應用 - 但我不能這樣做,因爲那樣它就不是輪播! Example

的方案是簡單: 與overflow: auto在一個div項,它們是相等的高度應顯示,與孩子的4格在任一個時刻在屏幕上的一個未知量。

<div id="container"> 
    <div id="wrapper"> 
    <div class="item-container"> 
     <div class="item"> 
     <p> 
      Carousel Item #1 with some quite long text. 
     </p> 
     </div> 
    </div> 
    <div class="item-container"> 
     <div class="item"> 
     <p> 
      Carousel Item #2. 
     </p> 
     </div> 
    </div> 
    <div class="item-container"> 
     <div class="item"> 
     <p> 
      Carousel Item #3. 
     </p> 
     </div> 
    </div> 
    ... 
    </div> 
</div> 

我的CSS:

#container { 
    width: 100%; 
    background: #0f0; 
    overflow: auto; 
} 

#wrapper { 
    display: flex; 
} 

.item-container { 
    border: 1px solid #f00; 
    width: 25%; 
} 

注意,這是我的MCVE

我的HTML結構如下。在我的真實組件上,我有左右滾動的按鈕,內容顯得更加複雜,並且像這樣。

+0

@Pete是的,我用JS來處理滾動按鈕 - 旋轉木馬的工作原理在非JS瀏覽器太雖然,通過鏈接到當前頁面,並添加索引的查詢字符串 - 這是分析服務器端和印章,並根據需要更改內容:) –

回答

2

您只需要將flex: 0 0 auto添加到.item-container元素即可。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    background: #0f0; 
 
    overflow: auto; 
 
} 
 

 
#wrapper { 
 
    display: flex; 
 
} 
 

 
.item-container { 
 
    border: 1px solid #f00; 
 
    flex: 0 0 auto; 
 
    width: 25%; 
 
}
<div id="container"> 
 
    <div id="wrapper"> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #1 with some quite long text. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #2. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #3. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #4. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #5. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #6. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #7. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+0

我已經與此戰鬥了幾個小時,謝謝。我缺少的具體屬性是'flex-shrink:0'。其他('flex-basis:auto; flex-grow:0;')是默認值。 –