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

问题描述

如果屏幕不够大，无法同时显示这两个项目

我尝试了不同的解决方案（例如使用 margin ：auto 在子项上），但即使在同一行中，也将它们对齐到更多中心。

以下是一个简化示例：

  .container {display：flex; align-items：flex-end; flex-wrap：wrap; justify-content：space-between;边框：1px纯黑色; margin-bottom：25px;} large {width：500px;}。small {width：175px;}。item {width：100px; height：100px;背景颜色：蓝色; margin：25px 0px;}  

< div class =容器大> < 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/ p>

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

有没有一种方法可以定义flexbox在包装时是否以不同的方式对齐项目，或者我只能使用@media screen方法执行此操作（这需要我设置一定的大小，因此不灵活项目的大小会发生变化）？

解决方案

这可能不适用于您的案例，但值得一提的是这个鲜为人知的差异介于 justify-content：空格之间和 justify-content：空格。

从flexbox规范：

8.2。轴对齐： justify-content 属性

justify-content 属性沿着Flex容器当前行的主轴
对齐flex项。

有五个值适用于 justify-content 。这里有两个：

空格之间

Flex项目均匀分布在行中。如果剩余空闲空间为负数或行上只有一个弹性项目，则此值与 flex-start 相同。

这解释了为什么您的商品与空间在之间对齐。



现在看看 space-around ：




space-around
$ b

均匀地分布在该行中，两端都有半角空格
。

如果剩余的空闲空间是负数或仅存在该行的单个弹性项目，该值与 center 。

$ b完全相同$ b

因此，要在包装上居中对齐Flex项目，请仔细阅读呃使用 space-around 。

  .container {display：flex; flex-wrap：wrap; justify-content：space-around; / * ADJUSTMENT * / border：1px solid black;}。item {width：100px; height：100px;背景颜色：蓝色; margin：25px;}  

 < div class =container > < div class =item>< / div> < div class =item>< / div>< / 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: 100px;
  height: 100px;
  background-color: blue;
  margin: 25px;
}

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

Revised Fiddle

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