Изменение размера отдельного элемента во flexbox

Question

Как я могу растянуть элементы внутри div, чтобы заполнить область, и можно ли иметь элементы разных размеров без необходимости индивидуальной модификации с помощью :nth-child(x). Например: первый, третий и пятый элемент будет в два раза больше, чем второй и четвертый элемент?

.my_class_a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

<div class="my_class_a">
   <div class="item">a</div>
   <div class="item">b</div>
   <div class="item">c</div>
   <div class="item">d</div>
   <div class="item">e</div>
</div>

Я извиняюсь, потому что я не знаю, как форматировать в скрипке.

Answer 1

Как я могу растянуть элементы внутри div, чтобы заполнить область ...

Используйте свойство flex-grow.

и все Можно иметь элементы разных размеров без необходимости индивидуальной модификации с помощью: nth-child (x).

Как браузер должен знать, что вы хотите, если вы не определяете поведение?

Например: первый, третий и пятый элемент будет в два раза больше, чем второй и четвертый элемент?

В этом случае вы можете использовать even и odd функции псевдокласса nth-child().

.my_class_a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.item:nth-child(odd) {
  flex-grow: 2;
  background-color: lightgreen; /* for demo only */
}

.item:nth-child(even) {
  flex-grow: 1;
  background-color: orange; /* for demo only */
}

/* for aligning item content */
.item {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="my_class_a">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">d</div>
  <div class="item">e</div>
</div>

Answer 2

Вы можете использовать объявление стиля flex - это сокращение для:

flex-grow | flex-shrink | flex-basis

, где flex-basis - начальная ширина дочернего элемента flexbox, а flex-grow и flex-shrink определяют, насколько быстро дочерний элемент flexbox будет расти или уменьшаться относительно его братьев и сестер.

Например:

элемент с flex: 2 2 100px начинается с ширины 100px и будет увеличиваться или уменьшаться в два раза быстрее, чем flex: 1 1 50px, который начинается с ширины 50px.

Рабочий пример:

.my_class_a {
display: flex;
width: 100%;
align-items: center;
}

.item {
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
}

.item-a,
.item-c,
.item-e {
flex: 2 2 100px;
background-color: rgb(255, 0, 0); 
}

.item-b,
.item-d {
flex: 1 1 50px;
background-color: rgb(0, 0, 0);
}

<div class="my_class_a">
   <div class="item item-a">a</div>
   <div class="item item-b">b</div>
   <div class="item item-c">c</div>
   <div class="item item-d">d</div>
   <div class="item item-e">e</div>
</div>

Answer 3

Как правило, вы можете использовать flex-grow: 1;, чтобы позволить гибким элементам становиться больше. (Обратите внимание, что я определил ширину для контейнера, иначе они не будут расти)

Относительно вашего w sh о 2-м, 4-м и c. item: Вам нужно определить * где-то *, какие элементы должны расти, а какие нет, поэтому вам нужно как минимум некоторый вид селектора для них.

.my_class_a {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}

.item {
  border: 1px solid #333;
  flex-grow: 1;
  padding: 12px;
  text-align: center;
}

<div class="my_class_a">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c<br>c</div>
  <div class="item">d</div>
  <div class="item">e</div>
</div>

PS: для создания фрагмента (пример кода "линии фиддла", просто нажмите 7-й символ на панели инструментов окна ответа)