1

https://codepen.io/anon/pen/aYPjZa#anon-signup вот пример тут или ниже , нужно чтоб блоки центрировались по середине родителя , если их мало то становились по середине если много то появлялся скролл

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #8e44ad;
  margin: 0;
  display: flex;
  align-items: center;
}

.card {
  background-color: #fff;
  min-width: 100%;
  min-height: 200px;
  display: flex;
  justify-content: center;
}

.card--content {
  background-color: #e74c3c;
  min-width: 200px;
  margin: 5px;
}
<section class="card">
  <div class="card--content">1</div>
  <div class="card--content">2</div>
  <div class="card--content">3</div>
  <div class="card--content">4</div>
  <div class="card--content">5</div>
  <div class="card--content">6</div>
  <div class="card--content">7</div>
  <div class="card--content">8</div>
  <div class="card--content">9</div>
  <div class="card--content">10</div>
  <div class="card--content">11</div>
  <div class="card--content">12</div>
  <div class="card--content">13</div>
  <div class="card--content">14</div>
  <div class="card--content">15</div>
  <div class="card--content">16</div>
  <div class="card--content">17</div>
  <div class="card--content">18</div>
  <div class="card--content">19</div>
  <div class="card--content">20</div>
  <div class="card--content">21</div>
  <div class="card--content">22</div>
</section>

2 ответа 2

1

Можно такое устроить с дополнительной оберткой, которая будет центрироваться при помощи margin: auto.

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #8e44ad;
  margin: 0;
}

.card {
  background-color: #fff;
  min-width: 100%;
  display: flex;
  overflow: auto;
  margin: 2em 0;
}

.card__inner {
  margin: auto;
  display: flex;
  min-height: 200px;
}

.card__content {
  background-color: #e74c3c;
  min-width: 200px;
  margin: 5px;
}
<section class="card">
  <div class="card__inner">
    <div class="card__content">1</div>
    <div class="card__content">2</div>
  </div>
</section>

<section class="card">
  <div class="card__inner">
    <div class="card__content">1</div>
    <div class="card__content">2</div>
    <div class="card__content">3</div>
  </div>
</section>

<section class="card">
  <div class="card__inner">
    <div class="card__content">1</div>
    <div class="card__content">2</div>
    <div class="card__content">3</div>
    <div class="card__content">4</div>
    <div class="card__content">5</div>
    <div class="card__content">6</div>
    <div class="card__content">7</div>
    <div class="card__content">8</div>
    <div class="card__content">9</div>
    <div class="card__content">10</div>
    <div class="card__content">11</div>
    <div class="card__content">12</div>
    <div class="card__content">13</div>
    <div class="card__content">14</div>
    <div class="card__content">15</div>
    <div class="card__content">16</div>
    <div class="card__content">17</div>
    <div class="card__content">18</div>
    <div class="card__content">19</div>
    <div class="card__content">20</div>
    <div class="card__content">21</div>
    <div class="card__content">22</div>
  </div>
</section>

1

function HeightCheck(el) {
  //Функция сравнивает ширину окна браузера с суммой ширин всех элементов переданных в el
  var totalWidth = 0;
  for (i = 0; i < el.length; i++) {
    totalWidth += parseInt(getComputedStyle(el[i]).width);
  }
  if (parseInt(document.documentElement.clientWidth) < totalWidth) {
    return true;
  }
}

// Контейнер содержащий элементы
var card = document.querySelector(".card");
// Элементы которые размещаются внутри контейнера
var cardContent = document.querySelectorAll(".card--content");

if (HeightCheck(cardContent)) {
  // Если ширина браузера меньше чем ширина всех элементов контейнера
  // Присваиваем еще один класс card_start контейнеру
  card.classList.add("card_start");
}
html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #8e44ad;
  margin: 0;
  display: flex;
  align-items: center;
}


.card {
  background-color: #fff;
  min-width: 100%;
  min-height: 70px;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  max-width: 100%;
}
.card_start {
  justify-content: flex-start;
}
.card--content {
  background-color: #e74c3c;
  min-width: 70px;
  margin: 5px;
}
<body>
    <section class="card">
      <div class="card--content">1</div>
      <div class="card--content">2</div>
      <div class="card--content">3</div>
      <div class="card--content">4</div>
      <div class="card--content">5</div>
      <div class="card--content">6</div>
      <div class="card--content">7</div>
      <div class="card--content">8</div>
      <div class="card--content">9</div>
      <div class="card--content">10</div>
      <div class="card--content">11</div>
      <div class="card--content">12</div>
      <div class="card--content">13</div>
      <div class="card--content">14</div>
      <div class="card--content">15</div>
      <div class="card--content">16</div>
      <div class="card--content">17</div>
      <div class="card--content">18</div>
      <div class="card--content">19</div>
      <div class="card--content">20</div>
      <div class="card--content">21</div>
      <div class="card--content">22</div>
    </section>
</body>

2
  • js это не решение
    – baneling
    9 апр 2018 в 14:15
  • @baneling тогда нужно было уточнить вопрос, что вам нужно решение без использования js. Хотя не думаю что с флексами получиться по другому.
    – Get-Web
    9 апр 2018 в 14:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.