Установить ширину дочерних элементов в flex-контейнере / родительском div

Question

Можно ли с помощью flex установить ширину дочерних элементов в стиле их родительского div?

Например, я хочу, чтобы каждый элемент в flex-контейнере растягивался на 1/3 контейнера.или 1/2, или 100% ширины.Все они будут иметь одинаковую ширину.Ширина - это динамическое значение, которое может меняться.

Эта проблема заключается в том, что я могу добавить динамические значения стилей только в .flex-container div.Я не могу добавить ничего динамического к .element divs.

Так что я не могу сделать это ...

<div class="flex-container">
  <div class="element" style="width: 33%"></div>
  <div class="element" style="width: 33%"></div>
  etc...
</div>

Только ..

<div class="flex-container" style="some value that will set children divs to 1/3 width of container, or 1/2, etc)">
  <div class="element"></div>
  <div class="element"></div>
  etc...
</div>

Мой CSS для flex-контейнера:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.element {
  // I can't add dynamic styles to this like width
}

Answer 1

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

html, body {
  height: 100%;
}
.flex-container {
  display: flex;
  height: 50%;
}
.element {
  width: 33.33%;
  align-self: stretch;
}
.element:nth-of-type(1) {
  align-self: flex-start;
  background: red;
}
.element:nth-of-type(2) {
  align-self: flex-end;
  background: green;
}
.element:nth-of-type(3) {
  align-self: stretch;
  background: blue;
}

<div class="flex-container">
  <div class="element">
    Test Element 1
  </div>
  <div class="element">
    Test Element 2
  </div>
  <div class="element">
    Test Element 3
  </div>
</div>