Flexbox Ausrichtungstyp = Dateikästen

Question

Verwirrt, wie man den Namen des Eingabefeldes mit dem "Choose file" -Dialog & der vorherigen Uploads ordentlich ausrichtet. Irgendwelche Tipps?

Auf der Suche nach einer einfachen, eleganten Lösung.

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

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

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>