Question 5 de l'intra 2012 en boites flexibles

Question 5 de l'intra 2012 en boites flexibles

par Michel Gagnon,
Nombre de réponses : 0

Je me suis amusé à réécrire la solution de la question 5 de l'intra 2012 en boîtes flexibles. Remarquez comme il est facile de centrer un item. Je me suis aussi amusé à modifier l'ordre des boîtes, plutôt que de déplacer l'image. 

<!doctype html>
<html>
   <head>
       <meta charset="utf8">
       <link rel="stylesheet" href="styleQuestion5flex.css">
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
       <script src="monscriptQuestion5.js"></script>
   </head>
   <body>
       <div class="boite contientImage"><img src="logoPoly.png"></div>
       <div class="boite"></div>
       <div class="boite"></div>
   </body>
</html>

 

.flexible {
    display: flex;
    flex-direction: row;
}
.boite {
    align-items: center;
    justify-content: center;
    flex-basis: 150px;
    display: flex;
    flex-direction: row;
    border: solid 1px;
    height: 150px;
}
img {
    width: 50px;
    height: 50px;
}
.contientImage {
    background-color: red;
}



$(document).ready(function(){
     var i = 0;

     // On attribue un ordre initial aux boîtes
     $('.boite').each(function(){
	 $(this).css('order',i.toString());
	 i++;
     });
    
     $('.boite').click(function(){
	 var positionActuelle =  $('.boite.contientImage').css('order');
         var positionNouvelle =  $(this).css('order');
         $(this).css('order',positionActuelle);
         $('.boite.contientImage').css('order',positionNouvelle);
        });
    });