柔性盒模型中的自動內部邊距

假設在一個容器內有display: flex;我有兩個項目。當容器足夠寬時，兩個物品都水平佈置，否則柔性版佈局機制將使它們垂直堆疊。我想要的是在兩個項目之間有一個內邊距，但當我們需要將它們堆疊在一起時，我希望這個邊距消失。

FlexBox模型有可能嗎？

作爲一個例子，可以使用以下文獻，其已經用一個最近版本的Chrome測試：

<!DOCTYPE html> 
<title>Flex Box</title> 
<style> 
    body { 
     font-size: 100px; 
    } 
    .container { 
     display: -webkit-flex; 
     display: flex; 
     -webkit-flex-wrap: wrap;  
     flex-wrap: wrap; 
    } 
</style> 
<div class="container"> 
    <p> 
     One 
    </p> 
    <p> 
     Two 
    </p> 
</div>

當外div有足夠的水平空間，「一」和「兩「彼此相鄰顯示，兩者之間沒有空格。一旦縮小瀏覽器窗口，就會垂直堆疊。我希望兩個段落之間有一段距離，而彼此相鄰。

http://jsfiddle.net/WHYS2/

來源

2012-11-05 Marc

這只是部分可能的。你必須使用Media Queries。

在下面的例子中，這兩個盒子彼此相鄰，但是當沒有足夠的空間時（例如，瀏覽器的視口小於800像素），這些盒子是相互之間的。

看演示活在http://jsfiddle.net/tjNhF/並調整您的瀏覽器窗口。

HTML：

<div class="box"> 
    <div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tellus non dui eleifend viverra. Proin quis nunc purus. Suspendisse at quam nisl, nec posuere mi. Donec nec nisi eros. Fusce vel orci quam. Cras urna arcu, hendrerit in consequat in, faucibus vitae nulla. Donec a urna risus. Proin posuere. </p> 
    </div> 
    <div> 
     <p>Nulla magna felis, facilisis vel adipiscing et, bibendum ac tellus. Pellentesque in risus in leo scelerisque adipiscing quis ut augue. Etiam luctus nisi sit amet nulla ullamcorper quis commodo purus volutpat. Sed est nisl, facilisis non vestibulum sed, auctor et odio. Aenean eget neque urna, a hendrerit ipsum. Sed sollicitudin.</p> 
    </div> 
</div>

CSS：

@media all { 
    body { 
     background-color: #aaffaa; 
    } 

    .box { 
     width: 100%; 
     border: 1px solid #555; 

     display: -webkit-box; 
     -webkit-box-orient: horizontal; 

     display: -moz-box; 
     -moz-box-orient: horizontal; 

     display: box; 
     box-orient: horizontal; 
    } 

    .box > div { 
     padding: 1em 5em; 
     -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
     box-flex: 1; 
    } 

    .box > div:nth-child(1){ background : #abc; } 
    .box > div:nth-child(2){ background : #bca; } 
} 

@media (max-width: 800px) { 
    body { 
     background-color: #ffaaaa; 
    } 

    .box { 
     box-orient: vertical; 
     -webkit-box-orient: vertical; 
     -moz-box-orient: vertical; 
    } 
    .box > div { 
     padding-left: 0; 
     padding-right: 0; 
    } 
}

來源

2012-11-05 13:39:56 Jan

感謝您設置演示。當然，使用媒體查詢是一種選擇，但如果我不知道內部項目的寬度，它將不太有用。也不需要「手動」切換到垂直方向，因爲當沿着該軸的一條線沒有足夠的空間時，柔性盒模型會自動開始分解主軸。順便說一下，您正在使用舊的Flexbox模型，但當前的W3C建議可能不會增加太多功能。 – Marc

也許您可以將您現有的代碼添加到您的第一篇文章中，以便我們調整您的代碼和Flexbox版本。 – Jan

這樣做:-)可能應該早些完成。 – Marc

當段落是在同一行，做你想讓他們之間的固定寬度的保證金，然後在該行的任何額外空間添加到第二段的權利？或者你想要第一個固定在左邊，第二個固定在右邊，兩者之間有一個可變寬度的邊距？您是否希望段落的寬度基於其內容，就像現在一樣？

當段落換行爲兩行時，您是否仍希望寬度基於它們的內容，還是您希望每個行都擴展爲填充其行的100％？

來源

2012-11-09 01:57:25 zomigi

對於我目前的想法，段落的寬度應基於其內容，並且行中的任何額外空間應添加到第二段的右側。（當段落被包裝成兩行時，例如右側的任何額外空間也是如此。） – Marc

柔性盒模型中的自動內部邊距

回答

相關問題