使用flex自我调整布局

Question

＆＃13;

＆＃13;

* {
	border: none;
	font-family: monospace;
}
html, body {height: 100%;}
body {
	display: flex;
	align-items: center;
	padding: 10px;
}
.container {
	background: #eee;
	box-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
	margin: auto;
	width: 500px;	
	padding: 30px 20px 20px;
}

/* main css starts here */

.row {
	display: flex;
	margin-bottom: 10px
}

input {
	flex: 1;
	padding: 2px 10px;
	margin-left: 10px;
	border: dotted 1px #bbb;
	border-radius: 20px;
	background: #fefefe
}

＆＃13;

<div class="container">
  <div class="row">
    <label>hey ya!</label>
    <input/>
  </div>
  <div class="row">
    <label>how are you?</label>
    <input/>
  </div>
  <div class="row">
    <label>i am fine</label>
    <input/>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望所有标签都具有相同的宽度，其中宽度正好等于最宽标签的内容宽度。我希望布局能够自动调整所有标签宽度。

现在，您可以看到标签的宽度不同。如果我想要相同的宽度标签，那么我必须添加flex-basis属性来标记项目或给它们min-width值。我不想做其中任何一个，因为我必须手动首先检查最宽标签元素的宽度，如果我改变字母间距或选择一些宽字体布局将打破。

在XUL中有一个vbox元素有助于进行这种布局，在html中，我猜表可以用来做，但我正在寻找一个flexbox解决方案。

Answer 1

正如Niet指出的那样，使用display: table

＆＃13;

＆＃13;

* {
	border: none;
	font-family: monospace;
}
html, body {height: 100%;}
body {
	display: flex;
	align-items: center;
	padding: 10px;
}
.container {
  display: table;
	background: #eee;
	box-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
	margin: auto;
	padding: 30px 20px 20px;
}

/* main css starts here */

.row {
  display: table-row;
	margin-bottom: 10px
}

label {
  display: table-cell;
  padding: 5px;
}

input {
	padding: 2px 10px;
	margin-left: 10px;
	border: dotted 1px #bbb;
	border-radius: 20px;
	background: #fefefe
}

＆＃13;

<div class="container">
  <div class="row">
    <label>hey ya!</label>
    <input/>
  </div>
  <div class="row">
    <label>how are you?</label>
    <input/>
  </div>
  <div class="row">
    <label>i am fine</label>
    <input/>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;