时间戳

首页 > 解决方案 > flex 行反向中的元素对齐

html - flex 行反向中的元素对齐

问题描述

以下是我的代码，它工作正常，但我担心的是 - <div class="action">我有 2 个按钮Cancel和Submit，它们在 UI 中使用flex-direction: row-reverse.

HTML -

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

但是在这里你可以看到我将提交按钮放在取消按钮之前，这在语义上对我来说似乎有点奇怪。

有没有更好的方法来获得具有正确 HTML 标记的相同 UI？

代码 -

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

标签： htmlcssflexbox

解决方案

你使用行反转，所以第一个项目向右，然后是第二个等等。如果你希望你的项目正确对齐但保持顺序，你需要使用

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>

推荐阅读