删除多行Flex项目之间的空格（间隙） [英] Remove space (gaps) between multiple lines of flex items when they wrap

问题描述

我想在一个具有设定高度的容器中有多个项目在下面。

这是个想法：

我想使用flexbox实现这一点，一个具有设置高度的容器，方向设置为列和 flex-wrap 是 wrap ：

问题是列之间有很大的差距。

我尝试将 justify-content 和 align-items 设置为 flex-start ，但这可能是默认值。

有没有办法解决这个问题？

这是代码：

  * {box-sizing：border-box;} body {font-family：sans-serif;}。 flex-wrap：wrap; height：300px; flex-direction：column; background-color：#ccc;}。items {width：100px; height：100px; margin：10px;背景颜色：番茄;颜色：白色; font-size：60px; font-weight：bold; text-align：center; padding：15px;}  

 < div class = > < div class =items> 1< / div> < div class =items> 2< / div> < div class =items> 3< / div> < div class =items> 4< / div> < div class =items> 5< / div>< / div>  

代码

解决方案

flex容器的初始值是 align-content：stretch 。

这意味着多行flex项目将沿着交叉轴均匀分布。

要覆盖此行为，请应用 align -content：flex-start 到容器。

---

单行flex容器 （即 flex-wrap：nowrap ），交叉轴为 align-items 和 align-self 。

当您在多行flex容器中工作 （即 flex-wrap：wrap ）–喜欢在问题–用于沿着横轴分布空间的属性是 align-content 。

：

8.3。横轴对齐： align-items 和 align-self 属性

align-items 设置所有flex容器项目的默认对齐方式，包括匿名flex项目。 align-self 允许为单个flex项目覆盖此默认对齐方式。

8.4。包装Flex行： align-content
属性

align-content 属性在横轴上有额外的空间时，在弹出容器的
flex容器中对齐一行，类似
how justify-content 在主轴中对齐各个项目。
请注意，此属性对单行弹性容器没有任何影响。

align-content 属性需要六个值：

• flex -start


• flex-end


• center


• 之间的空格


• code>空格


• ul>
  
  

  以下是 stretch 的定义：

  
  

  stretch

  
  
  

  占用剩余空间。如果剩余可用空间为负，此值与 flex-start 相同。

  
  

  换句话说， align-content：stretch 在横轴上类似于主轴上的 flex：1 。

  
  

  I am trying to have a number of items underneath each other in a container with a set height. Items will then carry on next to each other if there's no space left.

  This is the idea:

  I am trying to achieve this using flexbox, a container with a set height, direction is set to column and flex-wrap is wrap:

  The issue is that there are wide gaps between the columns.

  I tried setting both justify-content and align-items to flex-start, but that is probably the default value.

  Is there any way to solve this?

  Here is the code:

  * {
    box-sizing: border-box;
  }
  body {
    font-family: sans-serif;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    flex-direction: column;
    background-color: #ccc;
  }
  .items {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: tomato;
    color: white;
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    padding: 15px;
  }

  <div class="container">
    <div class="items">1</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items">5</div>
  </div>

  codepen

  解决方案

  An initial value of a flex container is align-content: stretch.

  This means that multiple lines of flex items will be distributed evenly along the cross axis.

  To override that behavior, apply align-content: flex-start to the container.

  ---

  When you're working in a single-line flex container (i.e., flex-wrap: nowrap), the properties to use to distribute space along the cross axis are align-items and align-self.

  When you're working in a multi-line flex container (i.e., flex-wrap: wrap) – like in the question – the property to use to distribute space along the cross axis is align-content.

  From the spec:

  8.3. Cross-axis Alignment: the align-items and align-self properties

  align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items.

  8.4. Packing Flex Lines: the align-content property

  The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.

  The align-content property takes six values:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

  Here's the definition for stretch:

  stretch

  Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

  In other words, align-content: stretch on the cross axis is similar to flex: 1 on the main axis.

  这篇关于删除多行Flex项目之间的空格（间隙）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！