Почему не происходит сжатие flex-элементов?

Question

Вот код:

* {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.second_group_block, .first_group_block {
  display: flex;
}

.first_group_block {
  margin-bottom: 10px;
}

.block {
  width: 200px;
  height: 200px;
  background: grey;
  margin-right: 10px;
}

.block:nth-child(3) {
  margin: 0;
}

.block:nth-child(6) {
  margin: 0;
}

<div class="parent">
  <div class="first_group_block">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="second_group_block">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

Answer 1

В твоем случае присутствует еще родительский блок с display: flex и выравниванием, из-за этого дочерние блоки имеют фиксированную ширину равную их содержимому что не дает сжиматься блокам внутри. Можно задать .second_group_block, .first_group_block width: 100%, но тогда пропадет центрирование. По этому предлагаю выравнивать блоки уже внутри дочерних элементов.

* {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;
  flex-direction: column;
}

.second_group_block, .first_group_block {
  display: flex;
  justify-content: center;
}

.first_group_block {
  margin-bottom: 10px;
}

.block {
  width: 200px;
  height: 200px;
  background: grey;
  margin-right: 10px;
}

.block:nth-child(3) {
  margin: 0;
}

.block:nth-child(6) {
  margin: 0;
}

<div class="parent">
  <div class="first_group_block">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="second_group_block">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

БЛОГ НА HUSL

Почему не происходит сжатие flex-элементов?

Ответы (1 шт):