Flexbox - 将项目左对齐和居中

Question

JS Fiddle

body {
  color: #fff;
  background-color: #f78e2a;
  text-align: center;
}

* {
  box-sizing: border-box;
}

h1 {
  font-size: 20px;
  text-align: center;
}

span {
  font-size: 14px;
  text-align: left;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
}

.box7,
.box8 {
  flex-basis: 100%;
  width: 100%;
  justify-content: center;
}

.box {
  height: 50px;
  width: calc(100% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  flex: 1;
}

input {
  background-color: #f9a558;
  border: 1px solid #fff;
  height: 25px;
  width: 100%;
  flex: 1;
}

.company,
.comments {
  display: flex;
  margin: 5px 5px;
  flex-grow: 3;
  width 100%;
}

.company {
  margin-bottom: 3%;
}

@media (min-width: 426px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }
  .box {
    flex-basis: 45%;
  }
}

<div class="container">
  <div class="box box1"><span>First Name
    <input type="text"></span></div>
  <div class="box box2"><span>Last Name
    <input type="text"></span></div>
  <div class="box box3"><span>Email
    <input type="text"></span></div>
  <div class="box box4"><span>Phone
    <input type="text"></span></div>
  <div class="box box1"><span>City
    <input type="text"></span></div>
  <div class="box box2"><span>State/Province
    <input type="text"></span></div>
</div>

<div class="container">
  <div class=" company"><span>Company
    <input class="company" type="text"></span></div>
</div>

<div class="container">
  <div class="comments"><span>Comments
    <input class="comments" type="text"></span></div>
</div>

我正在尝试将表格中的框居中，如附图所示。如何让表单框左对齐并并排显示？正如您在我的 jsfiddle 中看到的，发件箱居中，但是它们没有正确对齐，也没有并排显示。

Answer 1

试试下面的 CSS 我认为这很有帮助：

见Fiddle Demo

body {
  color: #fff;
  background-color: #f78e2a;
  text-align: center;
}

* {
  box-sizing: border-box;
}

h1 {
  font-size: 20px;
  text-align: center;
}

span {
  font-size: 14px;
  text-align: left;
  float: left;
  width: 100%;
}

input[type="text"] {
  float: left;
  width: 98%;
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
}

.box7,
.box8 {
  flex-basis: 100%;
  width: 100%;
  justify-content: center;
}

.box {
  height: 50px;
  /* width: calc(100% - 20px); */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* font-size: 1.2em; */
  /* flex: 1; */
  float: left;
  width: 48%;
  margin: 2% 1%;
}

(index):38 input {
  background-color: #f9a558;
  border: 1px solid #fff;
  height: 25px;
  width: 100%;
  flex: 1;
}

.company,
.comments {
  display: flex;
  margin: 5px 5px;
  flex-grow: 3;
  width 100%;
}

.company {
  margin-bottom: 3%;
}

@media (min-width: 426px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }
}

<div class="container">
  <div class="box box1"><span>First Name
    <input type="text"></span></div>
  <div class="box box2"><span>Last Name
    <input type="text"></span></div>
  <div class="box box3"><span>Email
    <input type="text"></span></div>
  <div class="box box4"><span>Phone
    <input type="text"></span></div>
  <div class="box box1"><span>City
    <input type="text"></span></div>
  <div class="box box2"><span>State/Province
    <input type="text"></span></div>
</div>

<div class="container">
  <div class=" company"><span>Company
    <input class="company" type="text"></span></div>
</div>

<div class="container">
  <div class="comments"><span>Comments
    <input class="comments" type="text"></span></div>
</div>

CSS：

span {
    font-size: 14px;
    text-align: left;
    float: left;
    width: 100%;
}

input[type="text"] {
    float: left;
    width: 100%;
    padding: 10px;
}

.box {
    height: 50px;
    float: left;
    width: 48%;
    margin: 2% 1%;
}