在包装上居中 flex 项目 [英] Center flex items on wrap

问题描述

我已经设置了一个包含两个项目的 flexbox，它们应该在普通屏幕的左侧和右侧.

如果屏幕不够大，无法将两者并排显示，则它应该环绕，但它们应该居中，而不是在左侧对齐.

我尝试了不同的解决方案(例如在子项上使用 margin: auto)，但即使在同一行中，它们也更接近中心.

这是一个简化的例子:

.container {显示:弹性；align-items: flex-end;flex-wrap: 包裹;对齐内容:间隔；边框:1px纯黑色；底边距:25px；}.大 {宽度:500px；}.小的 {宽度:175px；}.物品 {宽度:100px；高度:100px；背景颜色:蓝色；边距:25px 0px;}

<div class="item"></div><div class="item"></div>
<div class="小容器"><div class="item"></div><div class="item"></div>

https://jsfiddle.net/SoWhy/zfx4ub8x/

第一个容器是预期的定位，第二个容器在较小的屏幕上模拟相同的容器，注意向左对齐.

有没有办法定义 flexbox 在包装时以不同的方式对齐项目，或者我只能使用@media screen"方法来做到这一点(这需要我设置一定的大小，因此如果大小不灵活，项更改)?

解决方案

这可能不适用于您的情况，但值得一提的是 justify-content: space-between 和justify-content: space-around.

来自 flexbox 规范:

<块引用>

8.2.轴对齐:justify-content 属性

justify-content 属性沿主轴对齐 flex 项目flex 容器的当前行.

有五个值适用于 justify-content.这里有两个:

<块引用>

空格

Flex 项目在行中均匀分布.

如果剩余的可用空间为负数或行上只有一个 flex 项，则此值与 flex-start 相同.

这解释了为什么您的项目在包装上与 space-between 左对齐.

现在看space-around:

<块引用>

空格

Flex 项目均匀分布在一行中，中间有一半大小的空间两端.

如果剩余的可用空间为负数或该行上只有一个 flex 项，则该值与 center 相同.

因此，要在 wrap 上居中对齐 flex 项目，请考虑使用 space-around.

.container {显示:弹性；flex-wrap: 包裹;justify-content:空间环绕；/* 调整 */边框:1px纯黑色；}.物品 {宽度:200px；高度:100px；背景颜色:蓝色；边距:25px；}

<div class="item"></div><div class="item"></div>

修正小提琴

I have set up a flexbox with two items which should be on the left and right on a normal screen.

If the screen is not big enough to show both next to each other, it should wrap but then they should be centered and not aligned on the left.

I tried different solutions (like using margin: auto on the child items) but that aligned them more to the center even when in the same row.

Here is a simplified example:

.container {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}
.large {
  width: 500px;
}
.small {
  width: 175px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 25px 0px;
}

<div class="container large">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container small">
  <div class="item"></div>
  <div class="item"></div>
</div>

https://jsfiddle.net/SoWhy/zfx4ub8x/

The first container is the intended positioning, the second container emulates the same container on a smaller screen, note the align to the left.

Is there a way to define that the flexbox is to align items differently when wrapped or can I only do it using the "@media screen" method (which requires me to set a certain size and is thus not flexible if the size of the items changes)?

解决方案

This may not work in your case, but it's worth mentioning this lesser-known difference between justify-content: space-between and justify-content: space-around.

From the flexbox specification:

8.2. Axis Alignment: the justify-content property

The justify-content property aligns flex items along the main axis of the current line of the flex container.

There are five values that apply to justify-content. Here are two of them:

space-between

Flex items are evenly distributed in the line.

If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start.

This explains why your items align left on wrap with space-between.

Now look at space-around:

space-around

Flex items are evenly distributed in the line, with half-size spaces on either end.

If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center.

Hence, to center-align flex items on wrap, consider using space-around.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* ADJUSTMENT */
  border: 1px solid black;
}
.item {
  width: 200px;
  height: 100px;
  background-color: blue;
  margin: 25px;
}

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
</div>

Revised Fiddle

这篇关于在包装上居中 flex 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！