Задание конкретного значения ширины во flex-блоках

Есть flex-контейнер. Как задать в нем конкретные ширины конкретных элементов (либо в %, либо в px)? (желательно примеры)


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

Автор решения: Инквизитор

Оно?

.flexcontainer {
  display: flex;
  flex-direction: row;
  padding: 5px;
  background: pink;
  justify-content: stretch;
}

.flexcontainer div {
  background: coral;
  padding: 5px;
  margin: 5px;
  width: 100%;
  box-sizing: border-box;
}

.flexcontainer .px {
  width: 50px;
}

.flexcontainer .percent {
  width: 50%;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}
<div class="flexcontainer">
  <div class="px">50px</div>
  <div class="percent">50%</div>
  <div class="dynamic two">2</div>
  <div class="dynamic one">1</div>
</div>

→ Ссылка