Ma ligne flexible s'affiche sous la forme d'une colonne et ça me rend fou

Question

Je suis un nouveau codeur enthousiaste qui ne s'est pas soucié de construire des sites Web depuis mes journées Geocities.

Je travaille sur un skin de forum et je veux afficher les icônes de staffers dans une rangée horizontale au-dessus de deux boîtes d'information.

Je suis novice dans l'utilisation des flexboxes et cela me donne des ajustements. Je n'arrive pas à comprendre pourquoi ma ligne s'affiche sous la forme d'une colonne. Il y a d'autres problèmes avec le code, mais je peux hacher ceux-ci après avoir réglé ce qui se passe avec la ligne flex.

Qu'est-ce que je fais mal? Y a-t-il un meilleur moyen d'obtenir le résultat que je recherche?

Codepen est ici: https://codepen.io/anon/pen/boQgzV

CSS pertinente est:

#td-stfcontnr { 
display: flex; 
flex-direction: row; 
margin: 0 auto; 
width: 100%; 
height: 100%; 
} 

.td-staff1 { 
width: 350px; 
height: 116px; 
position: relative; 
} 

.td-staff2 { 
width: 350px; 
height: 116px; 
position: relative; 
flex-basis: 200px; 
} 

.td-staff3 { 
width: 350px; 
height: 116px; 
position: relative; 
flex-basis: 200px; 
} 

.td-staff4 { 
width: 350px; 
height: 116px; 
position: relative; 
flex-basis: 200px; 
} 

.td-staff5 { 
width: 350px; 
height: 116px; 
position: relative; 
flex-basis: 200px; 
} 

Et voici le code HTML correspondant:

<div class='td-banner'> 
<div class='tdbncntnr'> 
<div class='overimg'><img src='http://placehold.it/980x525'></div> 
<div class='textblockhold'> 
<div id='td-stfcontnr'> 
<div class='td-staff1'> 
<div class='td-stf'> 
<div class='td-stf-img'> 
<span class='td-imgrsz'><img src='placehold.it/200'></span></div> 
<div class='td-stf-txt'><a href="STAFFER"></a></div></div> 
<div class='td-staff2'> 
<div class='td-stf'> 
<div class='td-stf-img'> 
<span class='td-imgrsz'><img src='placehold.it/200'></span></div> 
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div> 
<div class='td-staff3'> 
<div class='td-stf'> 
<div class='td-stf-img'> 
<span class='td-imgrsz'><img src='placehold.it/200'></span></div> 
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div> 
<div class='td-staff4'> 
<div class='td-stf'> 
<div class='td-stf-img'> 
<span class='td-imgrsz'><img src='placehold.it/200'></span></div> 
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div> 
<div class='td-staff5'> 
<div class='td-stf'> 
<div class='td-stf-img'> 
<span class='td-imgrsz'><img src='placehold.it/200'></span></div> 
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div></div> 

modifié pour préciser que je suis en train de faire une rangée horizontale et non une rangée verticale

Answer 1

Reportez-vous au MDN flexbox overview pour savoir comment utiliser flexbox.

Un conteneur flexbox peut être déclaré avec display: flex; et les enfants immédiats hériteront de cet affichage en tant qu'éléments flexibles. Il est important de comprendre le fonctionnement de l'axe. Vous pouvez construire une simple ligne flexbox avec:

.container { 
    display: flex; 
    flex-flow: row nowrap; // Row alignment, does not overflow to second row 
    justify-content: start; // Determines content alignment along main axis (horizontal) 
    align-content: start; // Determines row alignment/distribution along cross axis (vertical) 
    align-items: start; // Determines content alignment along cross axis (vertical) 
} 

.container > * { 
    display: flex; 
    flex: auto 1 1; // flex-basis auto, grow & shrink 
    width: 50px; height: 50px; 
}