简体   繁体   中英

Remove space (gaps) between multiple lines of flex items when they wrap

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 setting 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 this behavior, apply align-content: flex-start to the container.


When you're working in a single-line flex container (ie, 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 (ie, flex-wrap: wrap ) – like in the question – the property to use to distribute flex lines (rows / columns) 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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2025 STACKOOM.COM