Выровнять divs в родительском

У меня есть следующее требование.

Зеленая цветная ширина родителя будет меняться в зависимости от ширины устройства. Мне нужно, чтобы все поля были в центре родителя.

Я уже пробовал следующие вещи, но мне это не помогло.

Испытание 1
Parent {text-align:center} box {display:inline-block}.

Это привело к следующему результату

Испытание 2
Parent {text-align:center} box{float:left}.

Это привело к следующему выводу

Испытание 3
Parent {display:flex} box -> justify-around & justify-between тоже не работает.

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

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

Ответы

Ответ 1

Без Javascript это очень сложно использовать float &/или встроенный блок.

Flexbox предлагает некоторую надежду, но даже тогда требуется некоторое творчество.

По существу, при условии, что максимальное количество элементов "для каждой строки" известно, вы можете создать необходимое количество невидимых элементов, которые можно использовать в сочетании с justify-content:center, чтобы получить последний вид строки, который вам нужен, по существу нажав последнюю строку содержимое обратно влево.

Демо-версия Codepen

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  text-align: center;
  border: 1px solid grey;
  width: 80%;
  max-width: 800px;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: red;
}
.balancer {
  height: 0;
  width: 100px;
  margin: 0 10px;
  visibility: hidden;
}

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

</div>

Ответ 2

Сработала с помощью jQuery и добавила #wrapper.

Все, что вам нужно сделать, это вычислить, сколько элементов будет вписываться в одну строку. Затем вы устанавливаете оболочку в точную ширину, необходимую для соответствия этим элементам.

Я надеялся, что это можно сделать в чистом CSS, но насколько я знаю, для CSS нет эквивалента Math.floor().

Пример:

function fitItemsOnRow() {
  var windowWidth = $(window).width();
  var itemWidth = $(".item").outerWidth(true);
  var itemAmount = Math.floor((windowWidth / itemWidth));
  
  if(itemAmount > $(".item").length) {
    /* Set the maximum amount of items */
    itemAmount = $(".item").length;
  }
  
  var rowWidth = itemWidth * itemAmount;
  $("#wrapper").width(rowWidth);
}

$(window).resize(function() {
  /* Responsive */
  fitItemsOnRow();
});

$(document).ready(function() {
  fitItemsOnRow();
});

body {
  margin: 0px;
}
#parent {
  background: #75DB3C;
  min-width: 100vw; 
  min-height: 100vh;
  text-align: center;
}
#wrapper {
  display: inline-block;
  text-align: left;
  font-size: 0px; /* Removes default margin */
}
.item {
  display: inline-block;
  margin: 12px;
  width: 100px;
  height: 100px;
  background: #0B56A9;
}

<div id="parent">
  <div id="wrapper">
    <!-- A wrapper is necessary to center the items -->
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Ответ 3

Вы можете сделать это с помощью селектора css "nth-of-type (n)"

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

и css здесь

.parent
    {
        display: block;
        width: 980px;
        padding: 10px 50px;
        background: green;
        box-sizing: border-box;
    }

        .parent::after
        {
            content: '';
            display: block;
            clear: both;
        }

    .item
    {
        float: left;
        width: 24%;
        margin-right: 1.25%;
        margin-bottom: 1.25%;
        /*
            note
            you may need min height , height or overflow:hidden

            */
    }

        .item:nth-of-type(4n)
        {
            float: right;
            margin-right: 0;
        }