Как сделать центрирование по центру по левому краю, что бы при этом контент не оставлял пустого места?

Question

[Craken666]

1. justify-content: center; но этот вариант не очень удобен так как выравнивает всё по центру, а мне нужно чтобы выравнивалось по левому краю, но контент должен быть по центру.
2. По сути нужно выровнять только по центру, чтобы отступы с лева и право были одинаковы для всех размеров, margin: 0 auto; не помогает.

Скрин

3. Код

HTML

<div class="wrapper">
      <div class="content">
            <div class="video"></div>
      </div>
</div>

4.

CSS

.wrapper {
    box-sizing: content-box;
    border: 1px solid;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.content {
	box-sizing: border-box;
	margin-top: 20px;
}

Answer 1

[karmyskove]

Пример тебе на кидал на скорую руку: https://codepen.io/EugeneKarmyshkov/pen/MWmvryZ
Смысл в чем, с помощью js считай количество элементов в строке и в зависимости от количества родительскому контейнеру подключай один из двух классов.
Скажем в моем примере в строку входит 4 элемента, значит добавляю класс flex-container-jc, в другом случае flex-container-start

Примеров где добавляют классы с помощью js есть море )

Comments

[Craken666]

Большое спасибо. Только могли бы подсказать для чего

Этот div

<div class="flex-container flex-container-start">

потому что не особо понимаю как это применить к моему варианту. На сколько я понимаю этого дива как раз не хватает для нормального отображения, верно?

Отображение которое у меня получилось без div

[karmyskove]

В общем flex-container - это флекс контейнер как бы странно не звучало. Вроде бы все должно быть понятно, если Вы знаете что такое флекс. Тут надо обратить внимание на два класса flex-container-jc и flex-container-start. flex-container-jc этот класс содержит свойство justify-content: space-between, что значит первый флекс элемент прижмется к началу, последний к концу контейнера, оставшиеся пространство поделится поровну между собой элементами. flex-container-start - элементы прижмутся к левой стороне. Для этого класса задал отступ.

[karmyskove]

Craken666, если есть еще вопросы можешь в комментариях оставить discord или skype, отвечу на оставшиеся вопросы