html - 在 Rails 应用程序中使用 flex 制作表单

Question

您好，我正在制作一个 Rails 应用程序并使用 rails 和 flex 制作一个注册页面。下面是我现在想象的形式。

下面是我的 Rails 代码，它们的组织方式非常奇怪。

代码:

<%= form_for(resource,
               as: resource_name,
               :class => "footer",
               :html => { :class => "footer" },
               url: registration_path(resource_name)) do |f| %>

          <!--First Name-->
         <div style="display:flex; flex-direction:row; order:1">
        <div style="margin-right:20px">
        <%= f.label :first_name %><br/>
        <%= f.text_field :first_name,autofocus: true, :class => "textfield textfield-control vertical-offset--teensy" %>
                            </div>

        <div>
        <%= f.label :last_name %><br/>
        <%= f.text_field :last_name, autofocus: true, :class => "textfield textfield-control vertical-offset--teensy" %>
        </div>
        </div>


        <div style="display: flex;flex-direction:column; order: 2; flex-grow:1">
        <div>
        <%= f.label :email %><br/>
        <%= f.email_field :email,autofocus: true, :class => "textfield textfield-control vertical-offset--teensy" %>
        </div>

        <div>
        <%= f.label :password %><br/>
         <%= f.password_field :password, autocomplete: "off", :class => "textfield textfield-control vertical-offset--teensy" %>
        </div>

       <div>
       <%= f.label :password_confirmation %><br/>
       <%= f.password_field :password_confirmation,autocomplete: "off",:class => "textfield textfield-control vertical-offset--teensy" %>
        </div>
        </div>


      <!--Sign up button-->
      <div class="signup-container vertical-offset--tiny">
        <button class="button button--long button--primary"> Sign up </button>
      </div>

  <% end %>

这最终是:

我很想得到关于 flex 部分的建议，使它像下面这样!

Answer 1

input 占据了整个宽度，直到它们被嵌套在各自的 div 中，在这种情况下，它们的行为就像是显示:inline-block。

这里有一个解决方案，可以让 input 占据容器的整个宽度，并自动使用 flexbox 将所有内容隔开:

https://jsfiddle.net/jpm45egq/