Question

有没有办法减少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之间的空间太大了。我希望它更小。

Answer 1

您看到的额外空间是由最小高度属性引起的。尝试将其更改为低于250px的值。例如：

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

Answer 2

给出relative的首选元素位置，并使用minus top属性对齐它。 https://jsfiddle.net/o3r40keu/24

### This is original observed data
observed <- cor(myData$gene_dens,myData$qp.site,method = "kendall") 
plot(myData$gene_dens,myData$qp.site,main=paste("Corelation = ",observed))

### I am doing permuation here to break the association between the two variables I am looking at
perm = function(dataframe)
{

result1 = sample(dataframe$gene_dens,size = length(myData),replace = FALSE)

  return(result1)

}

###I am using 10000 replicates because I want to make a null distribution so that I don't have to rely on the assumptions of the normal distribution
result = replicate(10000,perm(myData)) 

### myData is the vector containing the entire data of the csv file.

hist(result)

pvalue <- (sum(result < observed) + sum(result > observed))/length(result)

Answer 3

文字解决方案：增加弹性项目的大小。

但是如果那些只包含文本 - 就像你的例子中一样 - 没有其他选择：space-between将最外面的项目放在最外面的位置，它们之间的空间只是容器大小减去flex项目大小的结果

Answer 4

使用此：

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

.child:first-child {
  padding-bottom: 0px;  //adapt padding-bottom if you want
}

调整由对齐内容空间设置的元素之间的空间 -

4 个答案: