使用弹性行对齐表单

Question

我有一个表单，其中每一行都有display: flex。每行都有一个带有固定宽度的标签框和一个适合其内容的字段框。现在它看起来像这样：

我想要实现的是将每一行缩小到最小内容宽度并使表单水平居中。像这样：

我尝试将inline-flex用于行，但看起来父级变得小于子级的总宽度。

有没有办法让它保持每行的flexbox并且不使用transform: translate水平对齐表单？

以下是第一张图片的代码：

.form-container {
  background-color: black;
  padding: 5px;
  color: white;
}

.form {
  background-color: yellow;
  padding: 5px;
}


.form-row {
  display: flex;
  background-color: silver;
  padding: 5px 0;
  margin: 5px 0;
}

.form-row-label {
  flex: 0 0 200px;
  background-color: cornflowerblue;
}

.form-row-field {
  flex: 0 1 0;
  background-color: orangered;
  white-space: nowrap;
}

<div class="form-container">
  <div class="form">
    <div class="form-row">
      <div class="form-row-label">
        label 1
      </div>
      <div class="form-row-field">
        field 1 xxxxxxxxxxxxxxxxx
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">
        label 2
      </div>
      <div class="form-row-field">
        field 2 xxxx
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">
        label 3
      </div>
      <div class="form-row-field">
        field 3 xxxxxxxxxx
      </div>
    </div>
  </div>
</div>

这是jsfiddle。

由于

Answer 1

这是一个想法：

＆＃13;

＆＃13;

.form-container {
  background-color: black;
  padding: 5px;
  color: white;
  text-align:center; /* Center the inline-block*/
}

.form {
  background-color: yellow;
  padding: 5px;
  display:inline-block; /* Use this to fit content */
}

.form-row {
  display: flex;
  background-color: silver;
  padding: 5px 0;
  margin: 5px 0;
}

.form-row-label {
  width: 200px;
  flex-shrink:0; /* Avoid the content to shrink*/
  background-color: cornflowerblue;
  text-align:left;
}

.form-row-field {
  flex-shrink:0;
  background-color: orangered;
}

＆＃13;

<div class="form-container">
  <div class="form">
    <div class="form-row">
      <div class="form-row-label">
        label 1
      </div>
      <div class="form-row-field">
        field 1 xxxxxxxxxxxxxxxxx
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">
        label 2
      </div>
      <div class="form-row-field">
        field 2 xxxx
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">
        label 333
      </div>
      <div class="form-row-field">
        field 3 xxxxxxxxxx
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在父类中使用display:inline-flex类flex-direction:column并使用.form时，使用text-align: center和width: 200px是一个想法。此外，您需要在label而不是flex-basis:200px

中使用.form-container { background-color: black; padding: 5px; color: white; text-align: center; } .form { background-color: yellow; padding: 5px; display: inline-flex; flex-direction: column; justify-content: center; } .form-row { display: flex; background-color: silver; padding: 5px 0; margin: 5px 0; } .form-row-label { width: 200px; background-color: cornflowerblue; } .form-row-field { flex: 0 1 0; background-color: orangered; white-space: nowrap; }

<div class="form-container">
  <div class="form">
    <div class="form-row">
      <div class="form-row-label">
        label 1
      </div>
      <div class="form-row-field">
        field 1 xxxxxxxxxxxxxxxxx
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">
        label 2
      </div>
      <div class="form-row-field">
        field 2 xxxx
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">
        label 3
      </div>
      <div class="form-row-field">
        field 3 xxxxxxxxxx
      </div>
    </div>
  </div>
</div>

{{1}}

Answer 3

如果您想将黄色框置于黑匣子中心，则只应在代码中添加以下代码：

.form {
    background-color: yellow;
    padding: 5px;
    display: flex;
    width: 650px;
    max-width: 650px;
    flex-direction: column;
    margin: 0 auto;
}
.form-row-label {
   flex: 0 0 60%;
   background-color: cornflowerblue;
}

我认为它会对你有所帮助。