Упорядочение элементов во flexbox

Question

Ниже приведен мой код, который работает нормально с точки зрения пользовательского интерфейса.Хотя проблема в том, что мои кнопки являются динамическими (это должны быть цифры 2, 3, 4, 5, 6 и т. Д.), Поэтому они должны быть Button 1, Button 2, Button 3, Button 4, а не Button 4, Button 3, Button 2, Button 1.Дайте мне знать, как я могу управлять этим с помощью flexbox.

.container {
  border: 2px solid red;
  display: flex;
  width: 100%;
}
.title-container {
  border: 1px solid green;
  flex: 1;
}
.action-container {
  border: 1px solid blue;
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
}
button {
  margin-right: 10px;
}
button:first-child {
  margin-right: 0;
}

<div class="container">
  <div class="title-container">
    <h3>
      Heading Title
    </h3>
  </div>
  <div class="action-container">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
  </div>
</div>

РЕДАКТИРОВАТЬ -

Я знаю flex-direction: row заставит элементы отображаться в правильном положении, но я хочупоследний элемент, который прикрепляется к последнему, поэтому я выбираю flex-direction: row-reverse .. но эта вещь также изменит порядок.

Answer 1

Я думаю, что самый простой способ - использовать justify-content для правильного выравнивания. Я добавил несколько комментариев в коде.

.container {
  border: 2px solid red;
  display: flex;
  width: 100%;
}

.title-container {
  border: 1px solid green;
  flex: 1;
}

.action-container {
  border: 1px solid blue;
  flex: 1;
  display: flex;
  flex-direction: row; /* Changed */
  justify-content: flex-end; /* Added */
}
/*
  Add margin to each button except for the first one
*/
button:not(:first-child) {
  margin-left: 5px;
}

<div class="container">
  <div class="title-container">
    <h3>
      Heading Title
    </h3>
  </div>
  <div class="action-container">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
  </div>
</div>

Answer 2

Вы можете использовать атрибут order CSS, чтобы вручную установить порядок элементов flexbox.Кроме того, после установки порядка вам может потребоваться установить свойство margin-left кнопок вместо margin-right, если вы хотите, чтобы последняя кнопка придерживалась до конца.Ниже приведен рабочий пример -

.container {
border: 2px solid red;
display: flex;
width: 100%;
}

.title-container {
border: 1px solid green;
flex: 1;
}

.action-container {
border: 1px solid blue;
flex: 1;
display: flex;
flex-direction: row-reverse;
}

button {
margin-left: 10px;
}

button:first-child {
margin-right: 0;
}

<div class="container">
  <div class="title-container">
    <h3>
      Heading Title
    </h3>
  </div>
  <div class="action-container">
    <button style="order: 4">Button 1</button>
    <button style="order: 3">Button 2</button>
    <button style="order: 2">Button 3</button>
    <button style="order: 1">Button 4</button>
  </div>
</div>

Answer 3

Вы ищете flex-direction: row вместо flex-direction: row-reverse вкл. action-container:

.container {
  border: 2px solid red;
  display: flex;
  width: 100%;
}

.title-container {
  border: 1px solid green;
  flex: 1;
}

.action-container {
  border: 1px solid blue;
  flex: 1;
  display: flex;
  flex-direction: row;
}

button {
  margin-right: 10px;
}

button:first-child {
  margin-right: 0;
}

<div class="container">
  <div class="title-container">
    <h3>
      Heading Title
    </h3>
  </div>
  <div class="action-container">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
  </div>
</div>