Center flex items on wrap

问题

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)?

回答1:

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

回答2:

Note: You will have to use media query for different widths .

No way to detect when it is wrapped using css3.

If you want to center item use display:inline-flex and justify-content: center; to container and margin: 0 auto; to class item

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

It wraps when container size is less than 200px.

Click to see center aligned example in JsFiddle

If you want to keep items in single line flex-wrap: nowrap - which forces flex items are forced to stay in a single line.

So the style for .container will be like the following.

.container {
  display: flex;
  align-items: flex-end; 
  flex-wrap: nowrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}

Click to see items forced to stay single line in JsFiddle

来源：https://stackoverflow.com/questions/38290861/center-flex-items-on-wrap