水平居中在包装上的两个flex项目 [英] Horizontally center two flex items on wrap

问题描述

我已经在正常屏幕上设置了两个应该位于左侧和右侧的flexbox。

如果屏幕不够大，不能显示

我尝试了不同的解决方案（如使用margin：autoon

这是一个简化的例子：

>

  .container {display：flex; align-items：flex-end; flex-wrap：wrap; justify-content：空格; 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 =容器大> < 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/

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

有一种方法可以定义flexbox是在包装时对齐项目，或者我只能使用@media screen方法（这需要我设置一定的大小，因此不灵活>

> justify-content：space-between 使用 justify-content：space- around ：

  .container {display：flex; flex-wrap是什么意思：wrap; justify-content：空间; / * ADJUSTMENT * / border：1px solid black;}。item {width：100px; height：100px; background-color：blue; margin：25px;}  

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

修订的小提琴

说明

查看flexbox规格：

8.2。轴对齐： justify-content 属性

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

有五个值适用于 justify-content 。以下是其中两个：

Flex项目均匀分布在该行中。

如果剩余可用空间是负的或者在该行上只有一个flex项，该值与 flex-start 相同。 / strong>

强调我。

现在查看空格周边：

空格周围 >

Flex项目均匀分布在行中，两端有半角空格
。

strong> 如果剩余的可用空间为负或者在行上只有一个弹性项，该值与 center 相同。 / strong>

因此，要在换行时将flex项目居中对齐，请考虑使用 / code>。

I have set up a flexbox with two items which should be on the left and the 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)?

解决方案

Possible Solution

Instead of justify-content: space-between use justify-content: 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

Explanation

Take a look at 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.

Emphasis mine. This explains why your items align left on wrap.

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 your flex items on wrap, consider using space-around.

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