Как выровнять блоки?

Question

[Тимур]

На картинке видно несколько блоков (серого цвета), также справа видны свойства родительного блока, можно ли как-то последние два блока поставить по центру? Чтобы если вдруг добавятся еще блоки, их будет не 8 а 9, то они бы раскинулись относительно краев родительного блока, а если их не хватает, то выравнивались относительно центра (если будет 7 блоков то последний блок падает вниз по центру)? В одном ряду должны быть три блока.

Comments

[Одиночка Айс]

Учебник не дочитали...

Answer 1

[Виталий Першин]

.block-3-flex-2 {
    --margin: 10px;
    display: flex;
    justify-content:flex-start;
}

.block-mini {
    width: calc(100% / 3 - var(--margin) * 2);
    margin:  var(--margin);
}

Comments

[Тимур]

не получилось((

[Виталий Першин]

Тимур, Заливайте код в песочницу https://codepen.io

[Тимур]

Виталий Першин, https://codepen.io/Qwertymor/pen/poLmzKv

[Виталий Першин]

Тимур, Но ведь вы же не применили стили которые я вам дал, у меня все получилось

.block-3-flex-2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
   --margin: 10px;
    display: flex;
    justify-content:flex-start;
}

.block-mini {
  width: 312px;
  height: 550px;
  /* background: silver; */
  margin-bottom: 30px;
  flex-direction: column;
  background: white;
  display: flex;
  padding: 15px 15px 27px 15px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  background-color: #0e1c25;

  border: 2px solid #ffffff;
  border-radius: 10px;
    width: calc(100% / 3 - var(--margin) * 2);
    margin:  var(--margin);
}

[Тимур]

Виталий Першин, еще раз проверил не получется(( два последних блока встали по правому краю и все, можете скриншот пжл скинуть?

[Виталий Першин]

Если надо по центру тогда ставьте justify-content: center; вместо justify-content:flex-start;

[Тимур]

Виталий Першин, спасибо, Заработало. Теперь надо прочитать про --margin, var, width calc. Если есть ссылочка где можно посмотреть то буду очень благодарен.

[Виталий Першин]

Тимур, --margin это css переменная, calc это функция css для расчета значения, это

по другому можно записать так:

width: calc(33.3% - 20px);
    margin:  10px;

Слева и справа у нас отступ в 10 пикселей поэтому если блок будет равен ровно 33% + 20 пикселей то 3 блока уже не поместятся, для этого мы вычитаем отступ из ширины.

[Тимур]

Виталий Першин, спасибо, большое почитал понял. Но для того варианта нашел другое решение. у родительного justify-content center; и нашел свойство gap просто у него дал 10px.

Answer 2

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

justify-content: space-around;

Comments

[Тимур]

тогда верхние блоки которые в три ряда не будут прижаты к краям(((

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

Тимур, Кинь код на кодпен