CODEWITHSUNDEEP
htmlcssflexbox
Nesh
Nesh

Reputation: 2541

Alignment of elements in flex row reverse

Following is my code which is working fine, but my concern is - in <div class="action"> I have 2 buttons Cancel and Submit which is displaying correctly in UI using flex-direction: row-reverse.

HTML -

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

But Here you can see I am placing Submit button before the cancel button which seems bit odd to me semantically.

Is there a better way of getting the same UI with correct HTML markup ?

Code -

.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>

Upvotes: 0

Views: 361

Answers (1)

Rmaxx
Rmaxx

Reputation: 1187

you use row-reverse, so the first item goes to the right, then second etc.. if you want your items to align right but keep the order, your need to use

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>

Upvotes: 2

Related Questions