space-between和space-around的区别

Posted 2023-03-16

　　space between
　　un.间距
　　空隙；两极空间；间隔空间
　　例句
　　1.The space between the two hulls is often used for storage of fuel or ballast water.
　　两壳之间的空间通常用于贮存燃料或压载水。
　　2.Property concatenated to it, with a space between them.
　　属性，它们之间用一个空格分隔。
　　3.Command above, but has no space between the command and the script name.
　　命令，但该命令与脚本名之间没有空格。
　　4.There should be about one centimeter of space between the soil and the top of the container.
　　土壤和容器顶部之间要留有一厘米的空间。
　　5.The padding is the internal space between the body of the UI element and its edge.
　　空白是UI元素主体与其边缘之间的内部空间。 参考技术A

justify-content: space-around;

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

justify-content: space-between;

弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

参考技术B

刚学小白，有错请指出

space-between和space-around

相同点：子元素都会自动排好，彼此之间距离相等

不同：

space-between：两端对齐，指第一个子元素和最后一个子元素会贴着边框

而space-around的第一个子元素和最后一个子元素与边框也会有一定的距离。

Chrome 中是不是存在 justify-content: space-between 和 min-height 的错误？

【中文标题】Chrome 中是不是存在 justify-content: space-between 和 min-height 的错误？

【英文标题】：Is there a bug in Chrome with justify-content: space-between and min-height?Chrome 中是否存在 justify-content: space-between 和 min-height 的错误？

【发布时间】：2017-06-28 22:10:44

【问题描述】：

这是我正在处理的代码：

.container 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  background-color: #cbcbcb;

<div class="container">
  <div>should be on the TOP</div>
  <div>should be on the BOTTOM</div>
</div>

我在 Firefox 中得到了可预测的结果：

但在 Chrome 中我得到了下一个结果：

为什么我在底部元素下得到这个空间？

可以通过将 css min-height 更改为 height 来修复它，但在我的上下文中，这里有 min-height 值很重要。

Try it in jsFiddle

附：此行为仅在 Chrome 和 Canary 中重现，并且似乎仅在 Windows 上。

我的环境：Chrome 版本 56.0.2924.87（64 位）和 Win 10

【参考方案1】：

它确实看起来像一个错误。

无论如何，您都可以使用auto 边距解决它：

.container 
  display: flex;
  flex-direction: column;
  min-height: 150px;
  background-color: #cbcbcb;

.container > div:last-child 
  margin-top: auto;

<div class="container">
  <div>should be on the TOP</div>
  <div>should be on the BOTTOM</div>
</div>

Flex auto 边距是规范的一部分，可用于对齐弹性项目。

这里有完整的解释：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

【讨论】：

这个修复的大道具。我很想了解为什么会修复它。你为什么首先尝试这个修复？这真的不直观，它应该可以解决问题。

@AndreiGheorghiu, flex auto 边距是规范的一部分。它们直接应用于弹性项目。更新了我的答案。

【参考方案2】：

我记得几天前我也遇到过类似的问题。这是因为高度设置为自动，尝试为高度属性设置另一个值，问题将得到解决。

.container 
    display: flex;
    flex-direction: column;
    justify-content: space-between;  
    height:0;
    min-height: 150px;
    background-color: #cbcbcb;

<div class="container">
   <div> should be on the TOP</div>
   <div> should be on the BOTTOM</div>
 </div>

【参考方案3】：

是的，看起来像是 chrome 中的一个错误。

这是获得相同结果的另一种方法：

将flex-direction: row 用于弹性子代。 通过启用 flex-wrap: wrap 并设置 flex-basis: 100% 以使它们具有全宽，允许对 flex 子项进行换行。 将最后一个孩子的对齐方式设置为flex-end。

.container 
  display: flex;
  flex-wrap: wrap;    
  min-height: 150px;
  background-color: #cbcbcb;    

.container div 
  flex-basis: 100%;

.container div:last-child 
  align-self: flex-end;

<div class="container">
  <div> should be on the TOP</div>
  <div> should be on the BOTTOM</div>
</div>