28172 sujets

CSS et mise en forme, CSS3

Comment positionner le premier et dernier élément d'une liste ?

Bonjour,
j'ai un petit problème avec flexbox pour positionner le premier élément et le dernier élément de ma liste de lien.

Mon <ul> est un flex-container il prend toute la hauteur disponible sa largeur est de 60px.
Ces enfants les <li> son centrer sur l'axe vertical et l'axe horizontale. Jusque là aucun souci, le problème que je souhaiterais placé mon premier élément en haut de ma barre et le dernier en bas donc. J'ai essayer avec align-items et align-self sans résulta. 


<ul class="social-list">
  <li class="hm"><a href="#">home</a></li>
  <li class="tw"><a href="#">twitter</a></li>
  <li class="fb"><a href="#">facebook</a></li>
  <li class="ptr"><a href="#">pinterest</a></li>
  <li class="fcr"><a href="#">Flickr</a></li>
  <li class="g+"><a href="#">G+</a></li>
  <li class="tp"><a href="#">top</a></li>
</ul>




.social-list{
  min-height:100vh;
  width:60px;
  display:flex;
  flex-flow:column nowrap;
  justify-content:center;
  align-items:center;
  background-color:yellowgreen;  
}
.social-list li:nth-of-type(1){align-items:flex-start;}
.social-list li:nth-of-type(7){align-items:flex-end;}


Comment faire ce genre de truc
Merci pour la réponse @yordi

Mais non, en faite space-between ne fait pas ce que je veut. Il reparti mes éléments dans le conteneur parent en gardant un espace égale entre mes éléments.

Moi j'aimerais que mes cinq bloc de <li> reste au centre et seulement et seulement le premier et dernier élément vont ce calé aux extrémités.

Bon en attendant je retourne faire le jeux de la grenouille j'ai du zappé quelque chose.

A+
Modérateur
Salut,


A part poser ton premier et ton dernier élément en absolute j'ai du mal a voir comment faire... https://jsfiddle.net/28ooucb0/


Sur le fils c'est pas align-items qu'il faut utiliser mais align-self (qui influe sur le align-items du parent mais du coup c'est l'alignement horizontal dans ton cas...)
Merci _laurent
Je vais essayer ta solution surement plus propre que la mienne.

Je suis rester sur l'idée de yordi en l'adaptant ainsi:

<ul class="social-list">
  <li class="hm"><a href="#">home</a></li>
   
  <li class="tw">
    <ul> 
      <li class="tw"><a href="#">twitter</a></li>
      <li class="fb"><a href="#">facebook</a></li>
      <li class="ptr"><a href="#">pinterest</a></li>
      <li class="fcr"><a href="#">Flickr</a></li>
      <li class="g+"><a href="#">G+</a></li>
    </ul>
  </li>



.social-list{
  min-height:100vh;
  width:60px;
  display:flex;
  flex-flow:column nowrap;
  justify-content:space-between;
  align-items:center;
  background-color:yellowgreen;  
}

Sa marche super mais <ul> dans <li> juste pour du graphisme, je sais pas .

Merci A+
Modérateur
Ha bah j'ai failli te proposer ça aussi oui. Rajouter un conteneur pour les éléments du milieu.
A toi de voir. Smiley smile
Modérateur
ali13 a écrit :

Sa marche super mais &lt;ul&gt; dans &lt;li&gt; juste pour du graphisme, je sais pas .

Merci A+

Pas juste pour du graphisme, si tu les sépare visuellement, c'est parce qu'ils sont séparés sémantiquement, donc c'est tout à fait justifiable.
Merci gcyrillus.

C'est exactement sa, et sa me plais beaucoup plus que ma solution.

kustolovic c'est vrais.

Bon ben Merci à vous. et A+
Sujet clos
Aller à