灵活的表单使用FlexBox而不使用mediaqueries来适应容器宽度（而不是窗口宽度）

Question

我有一个webform that use FlexBox来对齐项目，并使其适应更大和更小的容器而不使用媒体查询。

要测试它，只需在DEMO中拖动蓝色边框容器的右下角，并注意蓝色容器变得太窄时的行为。

我有一些开放点：

1. 如何正确对齐底部按钮？（我尝试使用end和{flex-end，align-items等许多值，例如align-contents，form-buttons_container {1}} private static byte[] GetStreamFileResult(Cookie loginCookie, Guid fileGuid, String baseUri) { byte[] output = null; //String result = null; string url = "some url" CookieContainer cookies = new CookieContainer(); cookies.Add(new Uri(url), loginCookie); WebRequest request = WebRequest.Create(url); (request as HttpWebRequest).CookieContainer = cookies; WebResponse response = request.GetResponse(); HttpWebResponse resp = response as HttpWebResponse; Stream dataStream = response.GetResponseStream(); using (MemoryStream ms = new MemoryStream()) { CopyStream(dataStream, ms); output = ms.ToArray(); } dataStream.Close(); response.Close(); return output; } DIV规则未成功）。

2. 如何正确对齐字段标签，但仅当它们显示在字段旁边时，再次显示在较窄的容器顶部时再次显示在左侧？

3. 如果我想将字段分配到2列，可以只使用flexbox吗？我不想创建包含一组字段的2个容器DIV，而是我想并排放置名字和姓氏，电子邮件和电话，等等。同样，我想在较窄的主容器中保留行为，因此在这种特定情况下，字段和相关标签应该再次堆叠。

Answer 1

为了能够实现这一点，您需要媒体查询或脚本，在这里我使用了媒体查询。

如果换行应取决于元素的大小，则需要一个小脚本。

原因是人们无法检测元素使用CSS时的包装（但你可以强制使用例如max-width），在你的情况下，需要知道什么时候发生包裹能够切换对齐，边距和位置。

1. 要右对齐按钮，只需在第一个按钮上设置左侧自动边距

   .form.flexbox.horizontal .flex-outer div button:first-child {
     margin-left:auto
   }
   

2. 要左/右对齐文字，请使用text-align: right作为默认

   .form.flexbox.horizontal .flex-outer>div>label {
     -webkit-box-flex:1;
     -ms-flex:1 0 30%;
     flex:1 0 30%;
     max-width:220px;
     text-align: right;
     padding-right: 5px;
   }
   

   然后，使用媒体查询，通过将flex-basis设置为100％强制换行，然后将文本与text-align: left对齐。

   @media (max-width: 450px) {
    .form.flexbox.horizontal .flex-outer>div>label {
      -ms-flex:1 0 100%;
      flex:1 0 100%;
      max-width:auto;
      text-align: left;
    }  
   }
   

Updated fiddle

＆＃13;
＆＃13;
.flex-form-container {
 max-width:100%;
 border:solid 1px blue;
 resize:both;
 overflow:hidden
}
.flex-form-container .form-group {
 border:dotted 1px red
}

.form.flexbox.horizontal .flex-inner,.form.flexbox.horizontal .flex-outer div {
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
}
.form.flexbox.horizontal .flex-outer>div:not(:last-child) {
 margin-bottom:20px
}
.form.flexbox.horizontal .flex-outer div p {
 margin:0
}
.form.flexbox.horizontal .flex-outer div button:first-child {
 margin-left:auto
}
.form.flexbox.horizontal .flex-inner {
 -webkit-box-pack:justify;
 -ms-flex-pack:justify;
 justify-content:space-between
}
.form.flexbox.horizontal .flex-inner div {
 width:100px
}
.form.flexbox.horizontal .flex-outer>div>label {
 -webkit-box-flex:1;
 -ms-flex:1 0 30%;
 flex:1 0 30%;
 max-width:220px;
 text-align: right;
 padding-right: 5px;
}
.form.flexbox.horizontal .flex-inner,.form.flexbox.horizontal .flex-outer>div>label+* {
 -webkit-box-flex:1;
 -ms-flex:1 0 220px;
 flex:1 0 220px
}

@media (max-width: 450px) {
  .form.flexbox.horizontal .flex-outer>div>label {
   -ms-flex:1 0 100%;
   flex:1 0 100%;
   max-width:auto;
   text-align: left;
  }  
}
＆＃13;
<section class="flex-form-container">
            <form class="form flexbox horizontal">
              <div class="flex-outer">
                <div class="form-group">
                  <label for="first-name">First Name</label>
                  <input type="text" id="first-name" class='form-control' placeholder="Enter your first name here">
                </div>
                <div class="form-group">
                  <label for="last-name">Last Name</label>
                  <input type="text" id="last-name" class='form-control' placeholder="Enter your last name here">
                </div>
                <div class="form-group">
                  <label for="email">Email</label>
                  <input type="email" id="email" class='form-control' placeholder="Enter your email here">
                </div>
                <div class="form-group">
                  <label for="phone">Phone</label>
                  <input type="tel" id="phone" class='form-control' placeholder="Enter your phone here">
                </div>
                <div class="form-group">
                  <label for="message">Message</label>
                  <textarea rows="6" id="message" class='form-control' placeholder="Enter your message here"></textarea>
                </div>
                <div class="form-group">
                  <label>Age</label>
                  <div class="flex-inner">
                    <div>
                      <input type="checkbox" id="twenty-to-twentynine">
                      <label for="twenty-to-twentynine">20-29</label>
                    </div>
                    <div>
                      <input type="checkbox" id="thirty-to-thirtynine">
                      <label for="thirty-to-thirtynine">30-39</label>
                    </div>
                    <div>
                      <input type="checkbox" id="fourty-to-fourtynine">
                      <label for="fourty-to-fourtynine">40-49</label>
                    </div>
                    <div>
                      <input type="checkbox" id="fifty-to-fiftynine">
                      <label for="fifty-to-fiftynine">50-59</label>
                    </div>
                    <div>
                      <input type="checkbox" id="sixty-to-sixtynine">
                      <label for="sixty-to-sixtynine">60-69</label>
                    </div>
                    <div>
                      <input type="checkbox" id="other">
                      <label for="other">Other</label>
                    </div>
                  </div>
                </div>
                <div class="form-buttons_container">
                  <button type="submit" class="btn btn-primary">Accedi</button>
									<button type="submit" class="btn btn-default">Annulla</button>
                </div>
              </div>
            </form>
					</section>
＆＃13;
＆＃13;
＆＃13;
1. 以下是代码的简短示例，以说明如何完成此操作。我所做的只是删除所有包装器，包裹input以支持跨浏览器支持（因为如果设置为flex项可能会有所不同），然后使用flex-basis使它们填充一行每label / input

Updated fiddle 2

Stack snippet 2

＆＃13;
＆＃13;
.flex-form-container {
  max-width: 100%;
  border: solid 1px blue;
  resize: both;
  overflow: hidden
}

.form.flexbox.horizontal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.form.flexbox.horizontal>*:nth-child(n+3) {
  margin-top: 20px
}

.form.flexbox.horizontal .form-input input {
  width: 100%;
}

.form.flexbox.horizontal>label {
  flex: 1 0 30%;
  text-align: right;
  padding-right: 5px;
  box-sizing: border-box;
}

.form.flexbox.horizontal .form-input {
  flex: 1 0 70%;
}

@media (max-width: 450px) {
  .form.flexbox.horizontal>label {
    flex: 1 0 100%;
    max-width: auto;
    text-align: left;
  }
  .form.flexbox.horizontal>*:nth-child(even) {
    margin-top: 0
  }
}
＆＃13;
<section class="flex-form-container">
  <form class="form flexbox horizontal">

    <label for="first-name">First Name</label>
    <div class="form-input">
      <input type="text" id="first-name" class='form-control' placeholder="Enter your first name here">
    </div>

    <label for="last-name">Last Name</label>
    <div class="form-input">
      <input type="text" id="last-name" class='form-control' placeholder="Enter your last name here">
    </div>

    <label for="email">Email</label>
    <div class="form-input">
      <input type="email" id="email" class='form-control' placeholder="Enter your email here">
    </div>

    <label for="phone">Phone</label>
    <div class="form-input">
      <input type="tel" id="phone" class='form-control' placeholder="Enter your phone here">
    </div>

  </form>
</section>
＆＃13;
＆＃13;
＆＃13;