使用 CSS flexbox 创建响应式表单答案

【问题标题】：Create responsive form with CSS flexbox使用 CSS flexbox 创建响应式表单
【发布时间】：2017-03-24 14:45:28
【问题描述】：

我正在尝试使用 CSS flexbox 构建一个响应式表单。

我希望每个输入的标题和输入本身在同一行。

我正在尝试对齐表单，以便输入将位于同一垂直线上，并且标题将始终向右对齐（请参见下面的代码）

为了做到这一点，我将标题和输入以及单独的容器放在一起。

我的问题是，由于输入高于标题，几行后表单不再是直的。

你知道怎么解决吗？请参阅下面的代码。

谢谢！（：

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<style>
.parent
{
    border: 5px solid lightcoral;
    display: flex;

}


.child
{
    display: flex;

    text-align: center;
    flex-direction:column;
    max-width:300px;

}


.item{

    display: flex;
    margin:5px;
    text-align: center;
    margin-left: auto;

}
.item-input{

    margin:5px;
    display: flex;
    text-align: center;
    box-sizing: border-box;

}

@media screen and (max-width: 1200px) {
    .parent {
        justify-content:left;
    }
}

@media screen and (min-width: 1200px) {
    .parent {
        justify-content:center;
    }
}


</style>
<div class="parent">
<div class="child">
<div class="item">Name</div>
<div class="item">Age</div>
<div class="item">Country</div>
<div class="item">Email</div>





</div>
<div class="child">
<div class="item-input"><input type=text></div>
<div class="item-input"><input type=text></div>
<div class="item-input"><input type=text></div>
<div class="item-input"><input type=text></div>




</div>
</div>

</div>
</htmL>

【问题讨论】：

我会改变你的结构，这样你的标签就在小屏幕上的输入旁边，你可以在输入上方堆叠文本

标签： html css flexbox responsive

【解决方案1】：

你去吧:) span 元素没有任何作用，它只是给文本一个你想要的类的一种方式：p

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<style>
.parent
{
    border: 5px solid lightcoral;
    text-align:center;
    display: flex;
    justify-content:center;


}


.child
{
    display: flex;

    text-align: center;
    flex-direction:column;
    max-width:300px;
    align-content: right;

}


.item{

    display: flex;
    margin:5px;
    text-align: center;
    margin-left: auto;

}
.item-input{

    margin:5px;
    display: flex;
    text-align: center;
    box-sizing: border-box;

}

@media screen and (max-width: 1200px) {
    .parent {
        justify-content:left;
    }
}


</style>
<div class="parent">

<div class="child">

<div class="item-input"><span class="item">Name </span><input type=text></div>
<div class="item-input"><span class="item">Age </span><input type=text></div>
<div class="item-input"><span class="item">Country </span><input type=text></div>
<div class="item-input"><span class="item">Email </span><input type=text></div>

</div>
</div>


</htmL>

【讨论】：

很高兴听到它对您有所帮助！ :)

【解决方案2】：

我不确定您所说的“向右对齐”是什么意思。但是如果你想让文本框在左列，“标签”在右列，而不改变html，你可以使用order。

.parent {
  border: 5px solid lightcoral;
  text-align: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  text-align: center;
  flex-direction: column;
  max-width: 300px;
  align-content: right;
}

.parent .child:first-child {
  order: 1; /*added*/
}

.item {
  display: flex;
  margin: 5px;
  text-align: center;
  /*margin-left: auto;*/
}

.item-input {
  margin: 5px;
  display: flex;
  text-align: center;
  box-sizing: border-box;
}

@media screen and (max-width: 1200px) {
  .parent {
    justify-content: flex-start; /*"left" is not recognized by Chrome*/
  }
}

<div class="parent">
  <div class="child">
    <div class="item">Name</div>
    <div class="item">Age</div>
    <div class="item">Country</div>
    <div class="item">Email</div>
  </div>
  
  <div class="child">
    <div class="item-input">
      <input type=text>
    </div>
    <div class="item-input">
      <input type=text>
    </div>
    <div class="item-input">
      <input type=text>
    </div>
    <div class="item-input">
      <input type=text>
    </div>

  </div>
</div>

【讨论】：