Выравнивание элементов в обратном ряду гибкого ряда

Question

Ниже приведен мой код, который работает нормально, но меня беспокоит то, что в <div class="action"> у меня есть 2 кнопки Отмена и Подтверждение , которое правильно отображается в пользовательском интерфейсе с использованием flex-direction: row-reverse ,

HTML -

  <div class="action">
    <button class="btn submit-btn">Submit</button>
    <button class="btn cancel-btn">Cancel</button>
  </div>

Но здесь вы можете видеть, что я помещаю кнопку «Отправить» перед кнопкой отмены, которая кажется мне немного странной семантически.

Есть ли лучший способ получить тот же пользовательский интерфейс с правильной HTML разметкой?

код -

.container {
  width: 500px;
  background: #f5cab3;
}

.action {
  background: #f3ecb8;
  padding: 10px 0;
  display: flex;
  flex-direction: row-reverse;
}

.btn {
  border: none;
  padding: 8px 10px;  
}

.submit-btn {
  background: #b590ca;
}

.cancel-btn {
  background: #a8d3da;
}

<div class="container">
  <div class="content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, sapiente dolore aliquid repudiandae nisi optio ratione. Amet, dolore! Illo architecto perferendis consequatur veniam ipsa cum voluptate similique est deserunt doloremque.</p>
  </div>
  <div class="action">
    <button class="btn submit-btn">Submit</button>
    <button class="btn cancel-btn">Cancel</button>
  </div>
</div>

Answer 1

вы используете обратную строку, поэтому первый элемент перемещается вправо, затем второй и т. Д. c .. если вы хотите, чтобы элементы выравнивались вправо, но сохраняли порядок, вам нужно использовать

justify-content:flex-end;

.container {
  width: 500px;
  background: #f5cab3;
}

.action {
  background: #f3ecb8;
  padding: 10px 0;
  display: flex;
  flex-direction: row;
  justify-content:flex-end;
}

.btn {
  border: none;
  padding: 8px 10px;  
}

.submit-btn {
  background: #b590ca;
}

.cancel-btn {
  background: #a8d3da;
}

<div class="container">
  <div class="content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, sapiente dolore aliquid repudiandae nisi optio ratione. Amet, dolore! Illo architecto perferendis consequatur veniam ipsa cum voluptate similique est deserunt doloremque.</p>
  </div>
  <div class="action">
    <button class="btn submit-btn">Submit</button>
    <button class="btn cancel-btn">Cancel</button>
  </div>
</div>