Flexbox 嵌套在 flexbox 中 - 在列中创建一行答案

【问题标题】：Flexbox nested in flexbox- make a row in a columnFlexbox 嵌套在 flexbox 中 - 在列中创建一行
【发布时间】：2020-04-26 10:54:32
【问题描述】：

我正在制作一个模拟调查表并将输入放入列弹性框中，但我想让名称字段在“第一个”和“最后一个”之间拆分，并共享它们的水平空间。我尝试将它们封闭在一个 div 中，并为封闭的 div 赋予 row 的 flex 属性，但它似乎被父 flexbox 覆盖，使它们保持垂直。如何将名称输入字段并排放置？

<html>
  <header>
    Survey Form
  </header>
  <body>
    <div class='container'>
      <div class='form'>
        <div class='inputCon'>
          <div class='name'>Name</div>
          <div class='firstLast'>
          <input
            type='text'
            name='FirstName'
            id='firstname'
            placeholder='Enter your name'
            required>
        </div>
        <input
            type='text'
            name='LastName'
            id='lastname'
            placeholder='Enter your name'
            required>
        </div>
      </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
    </div>
  </body>
</html>

<style>
  html {
  background-color: gray;
}

.container {
  margin: 10px auto 10px auto;
  height: 300px;
  width: 350px;
  display: flex;
  flex-direction: column;
}

body {
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)),
  url(https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#name{
  width: 100%;
}
.inputCon{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 20 120 20 0;
  width: 100%;
}
.firstLast {
  display: flex;
  flex-direction: row;
}
input{
  width: 100%;
  text-align: center;
}


</style>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

在名字输入之后有一个结束 </div> 标记给你带来麻烦

【讨论】：

好吧，我想最好有一个愚蠢的错误和一个简单的解决方案，而不是相反。

【解决方案2】：

您在姓氏选项之前关闭了 .firstLast div。

<html>
  <header>
    Survey Form
  </header>
  <body>
    <div class='container'>
      <div class='form'>
        <div class='inputCon'>
          <div class='name'>Name</div>
          <div class='firstLast'>
          <input
            type='text'
            name='FirstName'
            id='firstname'
            placeholder='Enter your name'
            required>
        <!-- You closed it here -->
        <input
            type='text'
            name='LastName'
            id='lastname'
            placeholder='Enter your name'
            required>
        </div> <!-- Should close here -->
        </div>
      </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
    </div>
  </body>
</html>

<style>
  html {
  background-color: gray;
}

.container {
  margin: 10px auto 10px auto;
  height: 300px;
  width: 350px;
  display: grid;
  //align-items: center;
  justify-content: center;
  background-color: #dddddd
}

body {
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)),
  url(https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#name{
  width: 100%;
}
.inputCon{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 20 120 20 0;
  width: 100%;
}
.firstLast {
  display: flex;
  flex-direction: row;
}
input{
  width: 100%;
  text-align: center;
}


</style>

【讨论】：