无法使用 Flexbox 使 div 右对齐答案

【问题标题】：Unable to get div right-justified using Flexbox无法使用 Flexbox 使 div 右对齐
【发布时间】：2019-09-03 10:55:39
【问题描述】：

我继承了我所欣赏的是一个非常混乱的模态和形式，为了这个问题的目的，我已经将其简化为最基本的结构。

我一直在查看关于 S.O. 的各种 Flexbox 教程和问题。然而，到目前为止，我还没有找到正确证明注释和复选框的简单任务。

<div id="flexTest-modal" class="modal-fade-flexTestModal" data-keyboard="false" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="false" aria-labelledby="flexTest-modal-title" aria-describedby="flexTest-modal-content">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body pull-left" id="flexTest-modal-content">
                <div class="form-body">
                    <form method="POST" id="flexTestForm" action="${SampleAction}">
                        <ol class="nobullet">
                             <li><label class="label flexTestOption" for="${TestValue}"><input type="radio" name="RadioInputName" value="${TestValue}" id="${TestValue}" />    Test Value</label></li>
                        </ol>
                             <div class="to-right-justify" id="right-justified-id">
                                 <h5 for="flexTestNotes">Notes</h5>
                                 <label class="switch" class="pull-right"><input type="checkbox" id="togBtn" class="right-block"><div class="slider round" ><span class="on">On</span><span class="off">Off</span></div></label>
                             </div>
                </div>
                     <div class="modal-footer">
                     </div>
                    </form>
            </div>
        </div>
    </div>
 </div>

    .form-body {
  display: flex;
  flex-direction: row;

}

.to-right-justify  {
  justify-content: space-between;
  float: right;
}

JSFiddle：https://jsfiddle.net/kilo1981/qzhofsdk/25/

我需要将列表项：“测试值”左对齐（当前位置很好）。但是，我需要与列表项处于同一级别的“注释”标题，仅右对齐，以及“注释”标题下方的开/关复选框。

【问题讨论】：

您想让form 本身成为一个弹性容器，因为它有两个您想要作为子项连续显示的项目。将display: flex; justify-content: space-between; 添加到表单中，并从.form-body 中删除 flex（否则表单将不会自动超过整个宽度，我假设你想要。）

标签： css forms flexbox bootstrap-modal

【解决方案1】：

form {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.to-right-justify {
  justify-content: space-between;
  float: right;
}

<div id="flexTest-modal" class="modal-fade-flexTestModal" data-keyboard="false" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="false" aria-labelledby="flexTest-modal-title" aria-describedby="flexTest-modal-content">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body pull-left" id="flexTest-modal-content">
        <form method="POST" id="flexTestForm" action="${SampleAction}">
          <ol class="nobullet">
            <li><label class="label flexTestOption" for="${TestValue}"><input type="radio" name="RadioInputName" value="${TestValue}" id="${TestValue}" />    Test Value</label></li>
          </ol>
          <div class="to-right-justify" id="right-justified-id">
            <h5 for="flexTestNotes">Notes</h5>
            <label class="switch" class="pull-right"><input type="checkbox" id="togBtn" class="right-block"><div class="slider round" ><span class="on">On</span><span class="off">Off</span></div></label>
          </div>
          <div class="modal-footer">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

【讨论】：