如何使用flex更改div溢出行爲？

我有兩個div元素，我想在一個'li'元素中居中。我發現這可以通過使用柔性佈局來完成。我的父母div有以下屬性：如何使用flex更改div溢出行爲？

display: -webkit-flex; 
justify-content: center; 
align-items: center;

這個作品和兩個孩子的divs都集中在'li'中。那些是圖像和文本元素。但是這種額外的行爲並不是我想要的。當屏幕對於一行文本太小時，它將覆蓋圖像。它看起來像如下：

我縮小頁面越多，圖像dissappears。有人知道這是怎麼回事，我該如何解決它？

編輯目前我正在找出如何添加工作代碼片段。目前，我有一個內容結構的圖像，可能會有所幫助。

我使用下面的CSS代碼填充圖像：

.img_info_icon_png { 
    background: url("adapter-images.png") no-repeat -432px -0px; 
    width: 24px; 
    height: 24px; 
}

雖然寬度被設置爲「24像素」，它是在瀏覽器內發生變化。

EDIT以下URL指向具有相同的行爲的一個示例：https://jsfiddle.net/Lkpxhux0/

來源

2017-09-19 Klyner

我們需要看到一個_working_代碼片段重現所遇到的問題，所以還添加HTML的'ul' /'li' /'div'和CSS – LGSon

我會嘗試添加一個 – Klyner

一般來說，Flexbox https://jsfiddle.net/ehj17zak/沒有這樣的問題，所以你必須有一些其他設置覆蓋它 – LGSon

作爲flex-shrink默認爲1，它允許物品收縮時不適合它的父。

將flex-shrink: 0添加到.img_info_icon_png規則。

.outer { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.outer .image { 
 
    background: url(http://placehold.it/50/f00) no-repeat; 
 
    width: 24px; 
 
    height: 24px; 
 
    flex-shrink: 0; 
 
}

<div class="outer"> 
 
    <div class="image"></div> 
 
    <div class="text"> 
 
    This is some text that should not overlap the left aligned image 
 
    </div> 
 
</div>

來源

2017-09-19 09:12:22 LGSon

好極了，這立即可以工作！ – Klyner

如何使用flex更改div溢出行爲？

回答

相關問題