如何在不破坏布局的情况下缩短表单中的弹性项目？

【问题标题】：How do I shorten a flex item in a form without breaking the layout?如何在不破坏布局的情况下缩短表单中的弹性项目？
【发布时间】：2019-05-22 01:45:57
【问题描述】：

我正在使用表单创建一个移动优先的响应式网站。这是我需要在 769px 之后创建的所需模型。

在联系信息下，我如何缩短输入的 zip，同时使用 flexbox 将其保持在同一位置？

难道不能仅使用 flexbox 属性来做到这一点，还是我必须做一些其他事情，例如对其应用位置属性？

我为其余容器正确设置了flex-grow 属性，但我知道我必须为最后一个弹性容器做点什么。下面是我的这个项目的 HTML 和 CSS 代码。 

* {
  box-sizing: border-box;
}

body {
  background: seashell;
  font-family: 'Merriweather', serif;
}

.header-content {
  text-align: center;
  background: #29405a;
  color: white;
  border: 1px solid #29405a;
}

.signup {
  text-align: center;
  border-bottom: 2px #29405a dashed;
  margin: 0 auto;
  width: 90%;
}

form {
  margin: 10px auto;
  width: 90%;
  background: #feffff;
  padding: 20px;
  border-radius: 10px;
  border: 1px red solid;
}

.field {
  padding: 20px;
  margin: 0 auto;
  border: 3px red solid;
}


/*input styles*/

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: #e8eeef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
}

button[type="submit"] {
  background: #52bab3;
  color: #FFF;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.news-input {
  margin-bottom: 20px;
}

.news-input label {
  margin-left: 10px;
}

.contact-input {
  margin: 20px auto;
  border: 1px red solid;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.label {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .contact-input {
    display: flex;
    flex-direction: row;
  }
  .label,
  .input {
    flex: 1;
  }
  .input {
    flex: 3;
  }
}
<header>
  <div class="header-content">
    <h1>The Code Review</h1>
  </div>
</header>

<div class="signup">
  <h2>Sign up for our newsletter</h2>
  <p>Get the latest news on how your code is doing right in your inbox</p>
</div>

<form action="index.html" get="post" class="registration-form">
  <fieldset class="first field">
    <legend>Contact Information</legend>

    <div class="contact-input">
      <label class="label" for="name">Name</label>
      <input class="input" type="text" id="name" name="user_name">
    </div>

    <div class="contact-input">
      <label class="label" for="mail">Email Address</label>
      <input class="input" type="email" id="mail" name="user_email">
    </div>

    <div class="contact-input">
      <label class="label" for="phone-number">Phone Number</label>
      <input class="input" type="tel" id="phone-number" name="user_phone">
    </div>

    <div class="contact-input">
      <label class="label" for="street">Street Address</label>
      <input class="input" type="text" id="street" name="user_street">
    </div>

    <div class="contact-input">
      <label class="label" for="city">City</label>
      <input class="input" type="text" id="city" name="user_city">
    </div>

    <div class="contact-input">
      <label class="label" for="state">State</label>
      <select class="input" id="state" name="user_state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>

    <div class="contact-input zip">
      <label class="label zip-label" for="zip">Zip Code</label>
      <input class="input zip-input" type="text" id="zip" name="user_zipcode">
    </div>


  </fieldset>

  <fieldset class="second field">
    <legend>Newsletter</legend>

    <p>Select the newspaper you'd like to recieve:</p>

    <div class="news-input">
      <input type="checkbox" id="html-news" name="user_htm-news" checked></input>
      <label for="html-news">HTML News</label>
    </div>

    <div class="news-input">
      <input type="checkbox" id="css-news" name="user_css-news">
      <label for="css-news">CSS News</label>
    </div>

    <div class="news-input">
      <input type="checkbox" id="javascript-news" name="user_javascript-news">
      <label for="javascript-news">Javascript News</label>
    </div>

    <p>Newsletter Format</p>

    <div class="news-input">
      <input type="radio" id="html" name="user_newsletter-format" checked>
      <label for="html">HTML</label>
    </div>

    <div class="news-input">
      <input type="radio" id="css-news" name="user_newsletter-format">
      <label for="css-news">CSS News</label>
    </div>

    <p>Other topics you'd like to hear about</p>
    <textarea id="topics" name="user_topics"></textarea>

  </fieldset>
  <button type="submit">Sign Up</button>

</form>

【问题讨论】：

    标签： html forms css flexbox


    【解决方案1】：

    根本问题是你对flex-grow的使用。

    .label,
.input {
    flex: 1; /* flex-grow: 1, flex-shrink: 0, flex-basis: 0 */
}
.input {
    flex: 3;
}

    通过在行中的两个元素上激活flex-grow，它们中的每一个都将总是尝试消耗行中的所有可用空间。所以输入（或标签）不可能更短，因为只要有空闲空间，flex-grow 就会告诉它占用那个空间。

    我认为使用flex-basis 可能会更好。使用此属性，您可以更好地控制弹性项目的大小。

    对您的代码进行此调整：

    @media (min-width: 768px) {
  .contact-input {
    display: flex;
    flex-direction: row;
  }
  .label,
  .input {
    flex-basis: 25%;
  }
  .input {
    flex-basis: 75%;
  }
  .zip-input {
    flex-basis: 25%;
  }
}


    * {
  box-sizing: border-box;
}

body {
  background: seashell;
  font-family: 'Merriweather', serif;
}

.header-content {
  text-align: center;
  background: #29405a;
  color: white;
  border: 1px solid #29405a;
}

.signup {
  text-align: center;
  border-bottom: 2px #29405a dashed;
  margin: 0 auto;
  width: 90%;
}

form {
  margin: 10px auto;
  width: 90%;
  background: #feffff;
  padding: 20px;
  border-radius: 10px;
  border: 1px red solid;
}

.field {
  padding: 20px;
  margin: 0 auto;
  border: 3px red solid;
}


/*input styles*/

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: #e8eeef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
}

button[type="submit"] {
  background: #52bab3;
  color: #FFF;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.news-input {
  margin-bottom: 20px;
}

.news-input label {
  margin-left: 10px;
}

.contact-input {
  margin: 20px auto;
  border: 1px red solid;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.label {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .contact-input {
    display: flex;
    flex-direction: row;
  }
  .label,
  .input {
    flex-basis: 25%;
  }
  .input {
    flex-basis: 75%;
  }
  .zip-input {
    flex-basis: 25%;
  }
}
    <header>
  <div class="header-content">
    <h1>The Code Review</h1>
  </div>
</header>

<div class="signup">
  <h2>Sign up for our newsletter</h2>
  <p>Get the latest news on how your code is doing right in your inbox</p>
</div>

<form action="index.html" get="post" class="registration-form">
  <fieldset class="first field">
    <legend>Contact Information</legend>

    <div class="contact-input">
      <label class="label" for="name">Name</label>
      <input class="input" type="text" id="name" name="user_name">
    </div>

    <div class="contact-input">
      <label class="label" for="mail">Email Address</label>
      <input class="input" type="email" id="mail" name="user_email">
    </div>

    <div class="contact-input">
      <label class="label" for="phone-number">Phone Number</label>
      <input class="input" type="tel" id="phone-number" name="user_phone">
    </div>

    <div class="contact-input">
      <label class="label" for="street">Street Address</label>
      <input class="input" type="text" id="street" name="user_street">
    </div>

    <div class="contact-input">
      <label class="label" for="city">City</label>
      <input class="input" type="text" id="city" name="user_city">
    </div>

    <div class="contact-input">
      <label class="label" for="state">State</label>
      <select class="input" id="state" name="user_state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>

    <div class="contact-input zip">
      <label class="label zip-label" for="zip">Zip Code</label>
      <input class="input zip-input" type="text" id="zip" name="user_zipcode">
    </div>


  </fieldset>

  <fieldset class="second field">
    <legend>Newsletter</legend>

    <p>Select the newspaper you'd like to recieve:</p>

    <div class="news-input">
      <input type="checkbox" id="html-news" name="user_htm-news" checked></input>
      <label for="html-news">HTML News</label>
    </div>

    <div class="news-input">
      <input type="checkbox" id="css-news" name="user_css-news">
      <label for="css-news">CSS News</label>
    </div>

    <div class="news-input">
      <input type="checkbox" id="javascript-news" name="user_javascript-news">
      <label for="javascript-news">Javascript News</label>
    </div>

    <p>Newsletter Format</p>

    <div class="news-input">
      <input type="radio" id="html" name="user_newsletter-format" checked>
      <label for="html">HTML</label>
    </div>

    <div class="news-input">
      <input type="radio" id="css-news" name="user_newsletter-format">
      <label for="css-news">CSS News</label>
    </div>

    <p>Other topics you'd like to hear about</p>
    <textarea id="topics" name="user_topics"></textarea>

  </fieldset>
  <button type="submit">Sign Up</button>

</form>

    【讨论】：

    • 好吧，我所做的就是将 flex: 0 和 flex-basis: 25% 应用于 zip-input 和 zip-label。本质上，我做了你所做的，没有将 flex 基础应用于所有其他 flex 容器。 codepen.io/apasric4/pen/NVwJZB -- 我的问题是 -- 为什么这样有效？我不明白如何对标签和输入应用 25% 的弹性基础来帮助我完成我想做的事情。如果您能从概念上解释这一点，那就太好了。
    • 两个 zip 元素的总宽度现在是行的 50%，flex-grow 没有发挥作用，因此它们不会扩展以消耗剩余 50% 的可用空间。跨度>
    猜你喜欢
    • 1970-01-01
    • 2011-12-29
    • 2019-11-20
    • 2022-01-26
    • 1970-01-01
    • 2015-06-11
    • 2020-05-03
    • 1970-01-01
    • 2014-06-26
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode