Jusify-end无法在VUE组件按钮上正常工作

Question

在我的vuejs组件中，我有一个带有提交按钮和取消按钮的表单。

我希望我的按钮正确对齐

代码

 <template slot="modal_actions">
                    <div class="flex items-center justify-end">
                        <close-overlay class="h-full" identifier="addNewScheduleModal">
                            <cs-button variant="blank">Cancel</cs-button>
                        </close-overlay>
                        <disables-submit-on-errors
                            :identifier="identifier"
                            @proceed="addNewSchedule"
                        >
                        <loading-button ref="submitBtnSave" size="normal">
                            Save & Close
                        </loading-button>
                        </disables-submit-on-errors>
                    </div>
                </template> 

是我当前

的 错误并对准它们。...

我正在使用tailwind-css

Answer 1

假设您的取消按钮在左侧，并且加载按钮在取消按钮的右侧。

然后有两种方法，

1. 您可以更改div之类的按钮的顺序：

 <template slot="modal_actions">
      <div class="flex items-center justify-end">
         <loading-button ref="submitBtnSave" size="normal">
             Save & Close 
         </loading-button>
         <disables-submit-on-errors
             :identifier="identifier"
             @proceed="addNewSchedule"
         >
         <close-overlay class="h-full" identifier="addNewScheduleModal">
               <cs-button variant="blank">Cancel</cs-button>
         </close-overlay>
                 .
                 .
   </div>
</template> 

2. 您可以通过添加类flex将flex方向更改为ROW-RED-REVERSE - 逆转到Div。我在下面创建了一个类似的示例以理解目的。

<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-4">
<h3>Before</h3>
<div class="flex items-center justify-end h-96 w-full bg-red-200 space-x-10">
  <div class="h-56 w-1/3 bg-red-700">Cancel Button</div>
  <div class="h-56 w-1/3 bg-green-700">Loading Button</div>
</div>
<h3>After</h3>
<div class="flex flex-row-reverse items-center justify-end h-96 w-full bg-red-200 space-x-10">
  <div class="h-56 w-1/3 bg-red-700">Cancel Button</div>
  <div class="h-56 w-1/3 bg-green-700">Loading Button</div>
</div>
</div>