Как установить равную ширину для гибких элементов?

Question

Почему блоки .b имеют разную ширину? Как установить его равным?

.parent {
  display: flex;
}

.parent>div {
  flex: 1 1 auto;
}

.parent .b {
  display: flex;
}

<div class="parent">
  <div class="cell">
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
  <div>

Почему блоки <div class="cell"> имеют разную ширину?

Answer 1

Редактировать: использовать CSS сетку и автоподгонку:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.parent>div {
  background-color: lightblue;
  margin-left: 5px;
}

<div class="parent">
  <div class="cell">
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
</div>

Answer 2

Второе повторное редактирование **

Первый выбор, который вы можете сделать, это просто установить flex на родительский элемент, так как это повлияет только на первый элемент ниже того, который в данном случае является классом cell , я добавлю границу для класса ячеек, чтобы вы могли видеть это в действительности

  <div class="parent">
      <div class="cell">
        <div class="b"></div>
      </div>
      <div class="cell">
        <div class="b"></div>
      </div>
      <div class="cell">
        <div class="b"></div>
      </div>
      <div class="cell">
        <div class="b"></div>
      </div>
  <div>

.parent {
  display: flex;
  width: 70%;
}

.cell {
  width: 20%;
  height: 100px;
  border: 1px solid orange;
}

здесь вы можете установить размер родительской ширины, который будет размером по всему экрану, вы можете затем установите ширину дочерних элементов .cell, и все они будут одинаковыми, но только при максимальном родительском

** втором варианте вы можете сделать

Вот более простая версия и я добавил 3 разных класса, чтобы показать, как вы можете выбрать желаемый размер

<div class="parent">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
<div>

.parent {
  display: flex;
  width: 80%;
  height: 100px;
}

.a {
  flex: 40%;
  border: 1px solid greenyellow;
}
.b {
  flex: 20%;
  border: 1px solid orange;
}
.c {
  flex: 20%;
  border: 1px solid blue;
}

Конечно, вы можете изменить их обратно и сделать так, чтобы все они назывались одним и тем же классом, и просто назначьте одна ширина и снова все они будут одинаковыми ... надеюсь, это поможет

Answer 3

Я думаю, что они все в одной ширине. Вам нужно использовать этот css вместо .parent>div селектора

.cell {
  flex: 1 1 auto;
}

.parent {
  display: flex;
}

.cell {
  flex: 1 1 auto;
}

.parent .b {
  display: flex;
  align-items: center;
  justify-content: center;
}

.b {
  height: 50px;
}
.cell:nth-child(1) {
  background: red;
}
.cell:nth-child(2) {
  background: yellow;
}
.cell:nth-child(3) {
  background: green;
}
.cell:nth-child(4) {
  background: teal;
}

<div class="parent">
  <div class="cell">
    <div class="b">hi</div>
  </div>
  <div class="cell">
    <div class="b">hi</div>
  </div>
  <div class="cell">
    <div class="b">hi</div>
  </div>
  <div class="cell">
    <div class="b">hi</div>
  </div>
<div>