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

Question

[Максим Иванов]

https://jsfiddle.net/ya3gneLv/7/
Изначально они стоят три в ряд, но когда экран уменьшается, то сначала 1/3 блоков уходит вниз на начало строки. Как сделать так, чтобы он становился снизу между двумя другими блоками?
Для больше понимая, что мне нужно:
Сейчас вот так -
А нужно, чтобы было вот так при уменьшении экрана, то есть, чтобы блок был не под первым блоком, а снизу между двумя блоками -

Answer 1

[Dalp]

Самое простое решение- прописать margin-left: auto; margin-right: auto; в класс card:

.card {
	width: 100px;
	height: 100px;
	padding: 35px 61px 213px 61px;

	background-color: #3C4070;
	box-shadow: 0px 4px 54px rgba(0, 0, 0, 0.2);
	border-radius: 7px;

	position: relative;
	margin-left: auto;
	margin-right: auto;
}

Тогда все карточки будут центрироваться по горизонтали.

Comments

[Антон Литвиненко]

это решение сделает ровно то же как если бы он родителю вместо space-between задал space-around. Карточки при этом не будут прилегать к краям контейнера

[Максим Иванов]

Антон Литвиненко, кстати да) В моём случае space-around лучше, но если бы я не юзал флекс, то помог бы первый вариант. Так что спасибо и Антон Литвиненко и Dalp