調整由對齊內容空間設置的元素之間的間距

有沒有什麼方法可以減少justify-content:space-between中的空間？調整由對齊內容空間設置的元素之間的間距

元素之間有太多空間。

space-around也沒有解決方案，所以我想知道如果也許我可以例如說，我想要的空間是10px的例子。

下面是一個例子：

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    min-height: 250px; 
 
    border: 1px solid red; 
 
} 
 
.child:first-child { 
 
    padding-bottom: 10px; 
 
}

<div class="container"> 
 
    <div class="child"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
 
     quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
 
    </div> 
 
    <div class="child"> 
 
    <p>The thing you want fixed to the bottom of the container.</p> 
 
    </div> 
 
</div>

http://jsfiddle.net/o3r40keu/5/

有div之間出現太多的空間。我希望它變小。

來源

2016-10-05 Miss_sunshine

你能編輯你的文章並提供一些HTML和CSS代碼嗎？如果不知道上下文，很難提供幫助。 –

@caymanroe https://jsfiddle.net/o3r40keu/5/ divs之間有太多空格。我希望它更小 –

爲首選元素添加減邊距 – Swordys

您看到的額外空間是由最小高度屬性引起的。嘗試將其更改爲低於250像素的內容。例如：

.container { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    min-height: 50px;  /*Changing from 250px -> 50px*/ 
    border: 1px solid red; 
}

來源

2016-10-05 22:49:41

給出relative的首選元素位置，並使用minus top屬性對齊它。 https://jsfiddle.net/o3r40keu/24

.container { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    min-height: 250px; 
    border: 1px solid red; 
} 

.child:first-child { 
    padding-bottom: 10px; 
} 

.child:last-child { 
    position: relative; 
    top: -100px; 
}

來源

2016-10-05 22:52:47 Swordys

字面解決辦法：增加柔性項目的大小。

但如果那些只包含文本 - 就像你的例子 - 沒有其他選擇：空間 - 在最外層的位置之間放置最外層的項目，它們之間的空間只是容器大小減去flex大小的結果項目。

來源

2016-10-05 23:08:31 Johannes

調整由對齊內容空間設置的元素之間的間距

回答

相關問題