Блог

Я хотел бы создать макет CSS flexbox, в котором первые несколько элементов выровнены по левому краю, а затем несколько дополнительных элементов выровнены по правому краю. Выровненные по правому краю элементы всегда должны оставаться выровненными по правому краю независимо от упаковки.

Когда есть только один конечный элемент с правильным обоснованием, это может быть достигнуто с style='margin-left: auto;' помощью последнего элемента. Но я не вижу, как это сделать с двумя или более правильными элементами. (Аналогично, если только первый элемент выровнен по левому краю, то style='margin-right: auto;' для этого элемента и justify-content: flex-end; контейнера будет выполнена работа.)

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

• Если я style='margin-left: auto;' надену 4-й пункт, то это сработает, если обернуть как пункт 4, так и пункт 5, но это не сработает, если обернуть только пункт 5.
• Если я помещу style='margin-left: auto;' как 4-й, так и 5-й пункты, я получу нежелательные пробелы между пунктами 4 и 5, когда они находятся в одной строке.

Возможно ли это? Я чешу в затылке…

 .flexcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 1em;
  row-gap: 1em;
  padding: 10px;
  margin-bottom: 20px;
  font-family: sans-serif;
  font-size: 14px;
}
.flexcontainer div {
  border: 1px solid blue;
  border-radius: 4px;
  padding: 0.5em 1em;
  width: 80px;
  text-align: center;
} 

 <div class="flexcontainer" style="border: 1px solid red;">
  <div>item 1 - left</div>
  <div>item 2 - left</div>
  <div>item 3 - left</div>
  <div style="margin-left: auto;">item 4 - right</div>
  <div>item 5 - right</div>
</div>

<div class="flexcontainer" style="border: 1px solid green;">
  <div>item 1 - left</div>
  <div>item 2 - left</div>
  <div>item 3 - left</div>
  <div style="margin-left: auto;">item 4 - right</div>
  <div style="margin-left: auto;">item 5 - right</div>
</div> 

старый поплавок и встроенный блок могут это сделать:

 .flexcontainer {
  margin-bottom: 20px;
  font-family: sans-serif;
  font-size: 14px;
  text-align: right; /* align all to the right */
  padding:0.5em;
}
.flexcontainer div {
  display:inline-block;
  border: 1px solid blue;
  border-radius: 4px;
  padding: 0.5em 1em;
  margin:.5em;
  width: 80px;
  text-align: center;
}

.flexcontainer div:nth-child(-n   3) {
  float:left; /* keep the first 3 to the left*/
} 

 <div class="flexcontainer" style="border: 1px solid red;">
  <div>item 1 - left</div>
  <div>item 2 - left</div>
  <div>item 3 - left</div>
  <div>item 4 - right</div>
  <div>item 5 - right</div>
</div>