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中看到的那样，from框是居中的，但是它们没有正确对齐，也没有并排出现。

Answer 1

尝试以下CSS我认为这是有用的：

请参阅Fiddle Demo

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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%;
}