Centering elements on a wrapper

Question

I installed flexbox with two elements that should be left and right on a regular screen.

If the screen is not large enough to show how close to each other, it should be wrapped, but then they should be centered and not aligned to the left.

I tried different solutions (for example, using margin: autofor children), but this corresponded more to their center even on the same line.

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>

Run codeHide result

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

The first container is the intended positioning, the second container emulates the same container on the smaller screen, pay attention to the alignment on the left.

, flexbox - "@media screen" ( , , , )?

Answer 1

, justify-content: space-between justify-content: space-around.

flexbox:

8.2. : justify-content

justify-content flex flex.

, justify-content. :

space-between

Flex- .

flex, flex-start.

, space-between.

space-around:

space-around

.

, center.

, , 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>

Hide result

Answer 2

. - .

, css3.

, display:inline-flex justify-content: center; margin: 0 auto; 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;
}

, 200 .

, JsFiddle

flex-wrap: nowrap, .

, .container :

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

, , ​​JsFiddle