Flexbox对齐输入类型=文件框

Question

困惑如何整齐地对齐输入字段的名称，使用＆＃34;选择文件＆＃34;对话框＆amp;以前的上传。有什么提示吗？

寻找一个简单，优雅的解决方案。

＆＃13;

＆＃13;

.inputs {
  display: flex;
  flex-direction: column;
  margin: 3em;
  align-items: left;
  justify-content: left;
}
label {
  padding: 1em;
  margin: 0.3em;
  border: thin solid black;
  border-bottom-right-radius: 1em;
}

＆＃13;

<div class=inputs>
  <label>Form 1
    <input type=file name=form24><a href=#>Previous upload 1</a>
  </label>

  <label>Form something else
    <input type=file name=form24><a href=#>Named upload</a>
  </label>

  <label>Form blah
    <input type=file name=form24><a href=#>Previous upload</a>
  </label>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.inputs {
  display: flex;
  flex-direction: column;
  margin: 3em;
  /* align-items: left;           <-- "left" is not a valid value */
  /* justify-content: left;       <-- "left" is not a valid value */
}

label {
  display: flex;                  /* establish nested flex container */
  padding: 1em;
  margin: 0.3em;
  border: thin solid black;
  border-bottom-right-radius: 1em;
}

label > * {
  flex: 1;                        /* distribute container space evenly among flex items */
}

<div class=inputs>
  
  <label>
    <span>Form 1</span><!-- wrap text in a span so it can be targeted by CSS -->
    <input type=file name=form24>
    <a href=#>Previous upload 1</a>
  </label>

  <label>
    <span>Form something else</span>
    <input type=file name=form24>
    <a href=#>Named upload</a>
  </label>

  <label>
    <span>Form blah</span>
    <input type=file name=form24>
    <a href=#>Previous upload</a>
  </label>

</div>